import { FC } from 'react';

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

import HuFormSelectionCard from '@material-hu/components/composed-components/SelectionCard/form';
import HuAlert from '@material-hu/components/design-system/Alert';
import HuFormCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox/form';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import usePermissions from 'src/hooks/usePermissions';
import useRules from 'src/hooks/useRules';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import { useEventGroups } from '../../hooks/useEventGroups';

import CollapsibleSection from './CollapsibleSection';

type Props = {
  visibility: {
    allCommunity: boolean;
    group: boolean;
  };
};
const VIEW_GROUPS = UserPermissions.VIEW_GROUPS;

export const CreateVisibility: FC<Props> = ({ visibility }) => {
  const { t } = useLokaliseTranslation('events');
  const { hasAll: canViewGroups } = usePermissions([VIEW_GROUPS]);

  const { groups, isGroupsLoading } = useEventGroups({
    groupCheckBoxSelected: visibility.group,
    canViewGroups,
    eventId: null,
  });

  const requiredRules = useRules({
    requiredWithMessage: true,
  });

  return (
    <>
      <CollapsibleSection>
        <HuFormSelectionCard
          sx={{ width: '100%', mb: 1, p: 2 }}
          isOnlyOption
          name="visibility.allCommunity"
        >
          <HuRadioButton
            label={t('CREATE_EVENT_FORM.PRIVACY_COMMUNITY_LABEL')}
            description={t('ENTIRE_COMMUNITY_INFO')}
            isActive={visibility.allCommunity}
          />
        </HuFormSelectionCard>
        {visibility.allCommunity && (
          <Stack sx={{ p: 3 }}>
            <HuFormCheckbox
              checkBoxProps={{
                label: t('CREATE_EVENT_FORM.PRIVACY_COMMUNITY_INVITE_ALL'),
              }}
              name="inviteAll"
            />
          </Stack>
        )}
      </CollapsibleSection>
      {canViewGroups && (
        <CollapsibleSection isLoading={isGroupsLoading}>
          <HuFormSelectionCard
            sx={{ width: '100%', mb: 1, p: 2 }}
            isOnlyOption
            name="visibility.group"
          >
            <HuRadioButton
              label={t('GROUP')}
              description={t('GROUP_INFO')}
              isActive={visibility.group}
            />
          </HuFormSelectionCard>
          {visibility.group && (
            <>
              {!isGroupsLoading && (
                <>
                  {groups?.length === 0 && (
                    <HuAlert
                      severity="warning"
                      title={t('CREATE_EVENT_FORM.ALERT_MISSING_GROUP_LABEL')}
                      description={t(
                        'CREATE_EVENT_FORM.ALERT_MISSING_GROUP_DESCRIPTION',
                      )}
                      sx={{ mt: 2 }}
                    />
                  )}
                  {groups?.length > 0 && (
                    <>
                      <HuFormInputSelect
                        name="groupId"
                        rules={requiredRules}
                        inputProps={{
                          label: t('CREATE_EVENT_FORM.SELECT_GROUP_LABEL'),
                          placeholder: t(
                            'CREATE_EVENT_FORM.SELECT_GROUP_PLACEHOLDER',
                          ),
                          options: groups,
                          sx: { p: 3 },
                        }}
                      />
                      <Divider sx={{ mx: 3 }} />
                      <Stack sx={{ p: 3 }}>
                        <HuFormCheckbox
                          name="inviteAll"
                          checkBoxProps={{
                            label: t(
                              'CREATE_EVENT_FORM.PRIVACY_GROUP_INVITE_ALL',
                            ),
                          }}
                        />
                      </Stack>
                    </>
                  )}
                </>
              )}
            </>
          )}
        </CollapsibleSection>
      )}
    </>
  );
};

export default CreateVisibility;