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

import Close from '@material-hu/icons/material/Close';
import Drawer from '@material-hu/mui/Drawer';
import FormControl from '@material-hu/mui/FormControl';
import FormLabel from '@material-hu/mui/FormLabel';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { type DrawerProps } from '@material-hu/components/design-system/Drawer/types';

import { notifyCourseFields } from 'src/pages/dashboard/Learning/Courses/List/forms';
import { type CourseListItem } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

export type NotifyFormCallbacks = {
  onSuccess: () => void;
};

export type NotifyFormValues = {
  sendNotification: boolean;
};

export type NotifyDrawerProps = DrawerProps & {
  onCancel?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
  onConfirm?: (
    values: NotifyFormValues,
    callbacks: NotifyFormCallbacks,
  ) => void;
  isLoading?: boolean;
  course: CourseListItem | null;
};

export const NotifyDrawer = ({
  onCancel = () => null,
  onConfirm = () => null,
  isLoading = false,
  course,
  ...drawerProps
}: NotifyDrawerProps) => {
  const { t } = useLokaliseTranslation('learning');
  const theme = useTheme();
  const form = useForm({
    defaultValues: {
      sendNotification: true,
    },
  });

  const { handleSubmit, reset } = form;

  const notificationOptions = [
    {
      value: true,
      label: t('common.push_notifications'),
    },
  ];

  const handleCancel = (event?: React.MouseEvent<HTMLButtonElement>) => {
    event?.stopPropagation();
    onCancel(event);
    reset();
  };

  const handleConfirm = (event?: React.MouseEvent<HTMLButtonElement>) => {
    event?.stopPropagation();
    handleSubmit(submit)(event);
  };

  const submit = (values: NotifyFormValues) =>
    onConfirm(values, { onSuccess: () => reset() });

  return (
    <Drawer
      anchor="right"
      variant="temporary"
      sx={{
        zIndex: 1300,
        '& .MuiPaper-root': {
          backgroundColor: 'background.paper',
          width: '380px',
          p: 3,
          borderRadius: theme.spacing(2, 0, 0, 2),
        },
        ...drawerProps.sx,
      }}
      {...drawerProps}
      onClose={(event: any) => handleCancel(event)}
    >
      <FormProvider {...form}>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'flex-start',
            gap: 1,
            mb: 3,
            '& .MuiIconButton-root': {
              mt: theme.spacing(-1),
              mr: theme.spacing(-1),
            },
          }}
        >
          <Typography variant="h6">
            {t('courses.notify_drawer.title', { name: course?.title })}
          </Typography>
          <Tooltip title={t('general:cancel')}>
            <IconButton onClick={handleCancel}>
              <Close color="secondary" />
            </IconButton>
          </Tooltip>
        </Stack>
        <Stack
          component="form"
          onSubmit={event => event.preventDefault()}
          noValidate
          sx={{
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            gap: 2,
            py: 3,
            '& .MuiFormLabel-root': {
              mb: 1,
              fontSize: '1rem',
              fontWeight: '400',
              '&.Mui-focused': {
                color: theme.palette.text.secondary,
              },
            },
            '& .MuiRadio-root': {
              m: 0,
            },
          }}
        >
          <FormControl>
            <FormLabel id="notify-course-label">
              {t('courses.notify_drawer.description')}
            </FormLabel>
            <FormRadioGroup
              aria-labelledby="notify-course-label"
              name={notifyCourseFields.notification()}
              options={notificationOptions}
              column
            />
          </FormControl>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-around',
            alignItems: 'flex-end',
            flexGrow: 1,
            gap: 2,
          }}
        >
          <Button
            variant="text"
            onClick={handleCancel}
            disabled={isLoading}
            fullWidth
          >
            {t('general:cancel')}
          </Button>
          <Button
            onClick={handleConfirm}
            variant="contained"
            fullWidth
            loading={isLoading}
          >
            {t('common.send_reminder')}
          </Button>
        </Stack>
      </FormProvider>
    </Drawer>
  );
};

export default NotifyDrawer;
