import React from 'react';
import { FormattedMessage } from 'react-intl';

import { changeGroupEditorPrivacy } from 'soapbox/actions/groups';
import List, { ListItem } from 'soapbox/components/list';
import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';

const PrivacyStep = () => {
  const dispatch = useAppDispatch();

  const locked = useAppSelector((state) => state.group_editor.locked);

  const onChangePrivacy = (value: boolean) => {
    dispatch(changeGroupEditorPrivacy(value));
  };

  return (
    <>
      <Stack className='mx-auto max-w-sm' space={2}>
        <img
          className='mx-auto w-32'
          src={require('assets/images/group.svg')}
          alt=''
        />
        <Text size='3xl' weight='bold' align='center'>
          <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
        </Text>
        <Text size='lg' theme='muted' align='center'>
          <FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
        </Text>
      </Stack>
      <Form>
        <FormGroup
          labelText={<FormattedMessage id='manage_group.privacy.label' defaultMessage='Privacy settings' />}
        >
          <List>
            <ListItem
              label={<FormattedMessage id='manage_group.privacy.public.label' defaultMessage='Public' />}
              hint={<FormattedMessage id='manage_group.privacy.public.hint' defaultMessage='Discoverable. Anyone can join.' />}
              onSelect={() => onChangePrivacy(false)}
              isSelected={!locked}
            />

            <ListItem
              label={<FormattedMessage id='manage_group.privacy.private.label' defaultMessage='Private (Owner approval required)' />}
              hint={<FormattedMessage id='manage_group.privacy.private.hint' defaultMessage='Discoverable. Users can join after their request is approved.' />}
              onSelect={() => onChangePrivacy(true)}
              isSelected={locked}
            />
          </List>
        </FormGroup>
        <Text size='sm' theme='muted' align='center'>
          <FormattedMessage id='manage_group.privacy.hint' defaultMessage='These settings cannot be changed later.' />
        </Text>
      </Form>
    </>
  );
};

export default PrivacyStep;