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

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import FormCoverPictureUploader from '@material-hu/components/composed-components/CoverPictureUploader/form';
import { TextInformation } from '@material-hu/components/composed-components/learning';
import Title from '@material-hu/components/design-system/Title';

import defaultCourseCover from 'src/assets/defaultCourseCover.webp';
import { type StepsTypes } from 'src/pages/dashboard/Learning/Courses/types';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  COVER_PICTURE_HEIGHT,
  COVER_PICTURE_WIDTH,
  FILE_MAX_SIZE,
} from '../../constants';
import { newCourseFields } from '../../forms';

type CourseCoverPictureProps = {
  disabled?: boolean;
};

export const CourseCoverPicture = ({
  disabled = false,
}: CourseCoverPictureProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { control, setValue } = useFormContext<StepsTypes>();

  const [title, body, coverPicture, category] = useWatch({
    control,
    name: [
      newCourseFields.basicInformation.title(),
      newCourseFields.basicInformation.body(),
      newCourseFields.basicInformation.image(),
      newCourseFields.basicInformation.category(),
    ],
  });

  const hasCoverPicture = !!coverPicture?.cropped || !!coverPicture?.url;

  const handleCoverPictureChange = () => {
    setValue('basicInformation.image.url', undefined);
  };

  return (
    <LearningCard>
      <Stack
        sx={{
          gap: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        <Stack sx={{ gap: 2 }}>
          <Title title={t('general:preview_view')} />
          <TextInformation
            title={title || t('course.preview.title')}
            description={body || t('course.preview.description')}
            copetin={(category?.label || t('general:category')).toUpperCase()}
            slotProps={{ seeMoreText: { lines: 7 } }}
            sx={{
              '& span': { color: palette.textColors?.neutralTextLighter },
              '& button': {
                mt: 0.5,
                '&:hover': { backgroundColor: 'transparent' },
              },
            }}
          />
        </Stack>
        <FormCoverPictureUploader
          name={newCourseFields.basicInformation.image()}
          uploaderProps={{
            defaultSrc: defaultCourseCover,
            aspectRatio: '2/1',
            maxSize: FILE_MAX_SIZE,
            recommendedSizeTooltip: !hasCoverPicture
              ? {
                  format: ['JPG', 'PNG'],
                  size: `${COVER_PICTURE_WIDTH}x${COVER_PICTURE_HEIGHT}`,
                }
              : undefined,
            sx: {
              width: '100%',
              minWidth: '372px',
              maxWidth: '372px',
              '& .HuCoverPictureUploader-image': { p: 0 },
            },
            onFileChange: handleCoverPictureChange,
            disabled,
          }}
        />
      </Stack>
    </LearningCard>
  );
};
