import { Fragment } from 'react';

import {
  FormProvider,
  useForm,
  useFormContext,
  useWatch,
} from 'react-hook-form';

import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogContentText from '@material-hu/mui/DialogContentText';
import DialogTitle from '@material-hu/mui/DialogTitle';

import Button from '@material-hu/components/design-system/Buttons/Button';

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

import FormSwitch from 'src/components/FormInputs/FormSwitch';

import { hasLearningCapability } from './utils';

type Props = {
  onClose: () => void;
};

const LearningConfiguration = ({ onClose }: Props) => {
  const { t } = useLokaliseTranslation('apps');
  const { control, setValue } = useFormContext();
  const capabilities = useWatch({ name: 'capabilities', control });

  const form = useForm({
    defaultValues: {
      [UserPermissions.VIEW_COURSES]:
        capabilities[UserPermissions.VIEW_COURSES],
      [UserPermissions.VIEW_PATHS]: capabilities[UserPermissions.VIEW_PATHS],
      [UserPermissions.VIEW_LEARNING_SESSIONS]:
        capabilities[UserPermissions.VIEW_LEARNING_SESSIONS],
    },
  });

  const {
    handleSubmit,
    formState: { isSubmitting },
  } = form;

  const submit = handleSubmit(values => {
    const updatedCapabilities = {
      ...capabilities,
      ...values,
      [UserPermissions.VIEW_LEARNING]: hasLearningCapability(values),
    };

    setValue('capabilities', updatedCapabilities, { shouldDirty: true });
    onClose();
  });

  const switches = [
    {
      name: UserPermissions.VIEW_COURSES,
      label: t('title_view_courses'),
      description: t('description_view_courses'),
    },

    {
      name: UserPermissions.VIEW_PATHS,
      label: t('title_view_paths'),
      description: t('description_view_paths'),
    },
    {
      name: UserPermissions.VIEW_LEARNING_SESSIONS,
      label: t('title_view_learning_sessions'),
      description: t('description_view_learning_sessions'),
    },
  ];

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('settings')}</DialogTitle>
      <DialogContent>
        {switches.map(({ name, label, description }) => (
          <Fragment key={name}>
            <FormSwitch
              name={name}
              label={label}
              formControlLabelProps={{
                labelPlacement: 'start',
                sx: {
                  justifyContent: 'space-between',
                  mx: 0,
                  width: '100%',
                },
              }}
            />
            <DialogContentText>{description}</DialogContentText>
          </Fragment>
        ))}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('cancel')}</Button>
        <Button
          onClick={submit}
          variant="contained"
          loading={isSubmitting}
        >
          {t('save')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default LearningConfiguration;