import { FC, useMemo } from 'react';

import { useFormContext } from 'react-hook-form';

import { addDays } from 'date-fns';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Alert from '@material-hu/components/design-system/Alert';
import HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';
import { useAuth } from 'src/contexts/JWTContext';
import { getCompletedDateWithTimeAndDay } from 'src/utils/date';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import FormNumberInputStepper from 'src/components/NumberStepperInput/form';

type MarkPostAsKeyUpdateDrawerContentProps = {};

const MarkPostAsKeyUpdateDrawerContent: FC<
  MarkPostAsKeyUpdateDrawerContentProps
> = () => {
  const { t } = useTranslation();
  const { watch } = useFormContext();
  const { user } = useAuth();
  const previewDaysCount = watch('previewDaysCount');
  const showPreview = watch('showPreview');

  const previewExpiresAt = useMemo(() => {
    return getCompletedDateWithTimeAndDay(
      addDays(new Date(), previewDaysCount),
      user!,
    );
  }, [previewDaysCount]);

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {t('post:mark_as_key_update_description')}
      </Typography>
      <Typography
        variant="globalXS"
        color={theme => theme.palette.new.text.neutral.lighter}
        sx={{ mb: 2 }}
      >
        {t('post:mark_as_key_update_subdescription')}
      </Typography>

      <Stack
        sx={{
          p: 2,
          backgroundColor: theme => theme.palette.new.background.layout.default,
          borderRadius: theme => theme.shape.borderRadiusL,
        }}
      >
        <HuFormSwitcher
          name="notifyViaPush"
          switcherProps={{
            title: t('post:notify_via_push'),
            description: t('post:notify_via_push_description'),
          }}
        />
      </Stack>

      <Stack
        sx={{
          p: 2,
          backgroundColor: theme => theme.palette.new.background.layout.default,
          borderRadius: theme => theme.shape.borderRadiusL,
        }}
      >
        <HuFormSwitcher
          name="notifyViaEmail"
          switcherProps={{
            title: t('post:notify_via_email'),
            description: t('post:notify_via_email_description'),
          }}
        />
      </Stack>

      <Stack
        sx={{
          p: 2,
          backgroundColor: theme => theme.palette.new.background.layout.default,
          borderRadius: theme => theme.shape.borderRadiusL,
        }}
      >
        <HuFormSwitcher
          name="showPreview"
          switcherProps={{
            title: t('post:show_preview'),
            description: t('post:show_preview_description'),
          }}
        />
        {showPreview && (
          <Stack sx={{ gap: 1 }}>
            <Stack
              sx={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                mt: 1,
              }}
            >
              <Stack>
                <Typography
                  variant="globalXXS"
                  color={theme => theme.palette.new.text.neutral.lighter}
                >
                  {t('post:show_preview_end_date')}
                </Typography>
                <Typography
                  variant="globalS"
                  color={theme => theme.palette.new.text.neutral.default}
                  fontWeight="fontWeightSemiBold"
                >
                  {previewExpiresAt}
                </Typography>
              </Stack>
              <Stack sx={{ alignItems: 'center', gap: 1 }}>
                <Typography
                  variant="globalS"
                  color={theme => theme.palette.new.text.neutral.default}
                  fontWeight="fontWeightSemiBold"
                >
                  {previewDaysCount}{' '}
                  {t('general:day', { count: previewDaysCount })}
                </Typography>
                <FormNumberInputStepper
                  name="previewDaysCount"
                  stepperProps={{
                    min: 1,
                    max: 7,
                  }}
                />
              </Stack>
            </Stack>
            <Alert
              severity="info"
              title={t('post:key_updates_preview_alert_title')}
              description={t('post:key_updates_preview_alert_description')}
            />
          </Stack>
        )}
      </Stack>
    </Stack>
  );
};

export default MarkPostAsKeyUpdateDrawerContent;