import { FC } from 'react';

import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import { Event } from 'src/types/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  event: Event;
  visibility: {
    allCommunity: boolean;
    group: boolean;
  };
};

export const EditVisibility: FC<Props> = ({ event, visibility }) => {
  const { t } = useLokaliseTranslation('events');

  const groupSelected = {
    label: event?.group?.title,
    value: event?.group?.id,
  };

  return (
    <Stack sx={{ gap: 2 }}>
      <HuAlert
        severity="warning"
        title={t('CREATE_EVENT_FORM.ALERT_PRIVACY_EDIT_LABEL')}
        description={t('CREATE_EVENT_FORM.ALERT_PRIVACY_EDIT_DESCRIPTION')}
        sx={{ mt: 2 }}
      />

      <HuCardContainer sx={{ width: '100%', p: 1 }}>
        <HuRadioButton
          label={t('CREATE_EVENT_FORM.PRIVACY_COMMUNITY_LABEL')}
          description={t('ENTIRE_COMMUNITY_INFO')}
          isActive={visibility.allCommunity}
          disabled
        />
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', p: 1 }}>
        <HuRadioButton
          label={t('GROUP')}
          description={t('GROUP_INFO')}
          isActive={visibility.group}
          disabled
        />
        {visibility.group && (
          <>
            <Divider sx={{ my: 2 }} />
            <HuFormInputSelect
              name="groupId"
              inputProps={{
                label: t('CREATE_EVENT_FORM.SELECT_GROUP_LABEL'),
                placeholder: t('CREATE_EVENT_FORM.SELECT_GROUP_PLACEHOLDER'),
                options: [groupSelected],
                disabled: true,
              }}
            />
          </>
        )}
      </HuCardContainer>
    </Stack>
  );
};

export default EditVisibility;