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

import { IconCheck } from '@material-hu/icons/tabler';
import Fade from '@material-hu/mui/Fade';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';
import Zoom from '@material-hu/mui/Zoom';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

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

import { type Task, type TaskLayoutForm } from '../../types';
import { isMultimediaTask } from '../../utils';

export type TaskFinishedToggleProps = {
  task: Task | undefined;
};

export const TaskFinishedToggle = ({ task }: TaskFinishedToggleProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { spacing, palette } = useTheme();
  const { setValue, control } = useFormContext<TaskLayoutForm>();

  const multimediaFinished = useWatch({ name: 'multimediaFinished', control });
  const finished = useWatch({ name: 'finished', control });

  const toggleDisabled = isMultimediaTask(task) && !multimediaFinished;

  const handleFinish = () => setValue('finished', true);

  if (!task) return null;

  return (
    <HuCardContainer
      sx={{
        '& > .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        },
      }}
    >
      {!finished && (
        <>
          <Fade in={!finished}>
            <Typography
              variant="globalXS"
              fontWeight="fontWeightSemiBold"
            >
              {t('course.lesson.mark_as_finished')}
            </Typography>
          </Fade>
          <Zoom in={!finished}>
            <Stack>
              <HuTooltip
                disableTooltip={!toggleDisabled}
                title={t('course.lesson.finished_disabled', {
                  type: task.type,
                })}
              >
                <span>
                  <Button
                    disabled={toggleDisabled}
                    variant="secondary"
                    onClick={handleFinish}
                  >
                    {t('course.lesson.finish_lesson')}
                  </Button>
                </span>
              </HuTooltip>
            </Stack>
          </Zoom>
        </>
      )}
      {finished && (
        <>
          <Fade in={finished}>
            <Stack>
              <HuTitle
                variant="S"
                title={t('course.lesson.finished_confirmation')}
              />
            </Stack>
          </Fade>
          <Zoom in={finished}>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                jusitfyContent: 'center',
                gap: 0.5,
                px: 1.5,
                py: 1,
                color: palette.new.text.feedback.success,
              }}
            >
              <Typography
                variant="globalXS"
                fontWeight="fontWeightSemiBold"
                sx={{ color: palette.new.text.feedback.success }}
              >
                {t('course.lesson.finished')}
              </Typography>
              <IconCheck
                size={spacing(2)}
                color={palette.new.icon.feedback.success}
              />
            </Stack>
          </Zoom>
        </>
      )}
    </HuCardContainer>
  );
};

export default TaskFinishedToggle;