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

import { type GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import FormSwitcherCard from '@material-hu/components/composed-components/SwitcherCard/form';
import RadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import {
  ArticleNotificationType,
  type NotificationsValues,
} from 'src/pages/dashboard/HuLibraries/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const DEFAULT_VALUES: NotificationsValues = {
  sendNotification: false,
  notificationType: ArticleNotificationType.PUSH,
};

type NotificationsSettingsDrawerProps = GetDrawerConfiguration<{
  defaultValues: NotificationsValues;
  onConfirm: (values: NotificationsValues) => void;
}>;

export const NotificationsSettingsDrawer: NotificationsSettingsDrawerProps = ({
  closeDrawer,
  defaultValues,
  onConfirm,
}) => {
  const { t } = useLokaliseTranslation('libraries');

  const form = useForm<NotificationsValues>({
    defaultValues: DEFAULT_VALUES,
    values: defaultValues
      ? {
          sendNotification: defaultValues.sendNotification,
          notificationType:
            defaultValues.notificationType ?? ArticleNotificationType.PUSH,
        }
      : undefined,
  });

  const notificationType = useWatch({
    control: form.control,
    name: 'notificationType',
  });

  const handleSave = () => {
    onConfirm?.(form.getValues());
    closeDrawer();
  };

  const options = [
    {
      value: ArticleNotificationType.PUSH,
      label: t('general:notification.push'),
    },
    {
      value: ArticleNotificationType.EMAIL,
      label: t('general:notification.email'),
    },
    {
      value: ArticleNotificationType.BOTH,
      label: t('general:notification.send_by.both'),
    },
  ];

  return {
    title: t('general:notification.manage'),
    children: (
      <FormProvider {...form}>
        <Stack sx={{ gap: 3 }}>
          <Typography>{t('article.notify.description')}</Typography>
          <FormSwitcherCard
            name="sendNotification"
            switcherCardProps={{
              sx: { width: '100%' },
              slotProps: {
                switcher: {
                  sx: { alignSelf: 'center', maxWidth: 'min-content' },
                },
                title: {
                  fontWeight: 'fontWeightRegular',
                  title: t('article.notify.activate'),
                },
              },
            }}
          >
            <Stack
              role="radiogroup"
              aria-label={t('general:notification.send_by.label')}
              sx={{ mt: 2, gap: 2 }}
            >
              {options.map(option => (
                <RadioButton
                  key={option.value}
                  label={option.label}
                  isActive={notificationType === option.value}
                  onClick={() =>
                    form.setValue('notificationType', option.value)
                  }
                />
              ))}
            </Stack>
          </FormSwitcherCard>
        </Stack>
      </FormProvider>
    ),
    primaryButtonProps: {
      children: t('general:confirm'),
      fullWidth: true,
      onClick: handleSave,
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      fullWidth: true,
      onClick: closeDrawer,
    },
  };
};
