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 defaultPathCover from 'src/assets/defaultPathCover.webp';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { FILE_MAX_SIZE } from 'src/pages/dashboard/Learning/Paths/constants';
import { newPathFields } from 'src/pages/dashboard/Learning/Paths/New/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { type NewPathFormValues } from '../../../types';

const PathCoverPicture = () => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');
  const { setValue, control } = useFormContext<NewPathFormValues>();

  const handleOnCoverPictureChange = () =>
    setValue('basic_information.coverPicture.url', null);

  const basicInformation = useWatch({ control, name: 'basic_information' });

  return (
    <LearningCard>
      <Stack
        sx={{
          gap: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        }}
      >
        <Stack sx={{ gap: 2 }}>
          <Title title={t('common.preview')} />
          <TextInformation
            title={basicInformation?.title || t('path.preview.title')}
            description={
              basicInformation?.description || t('path.preview.description')
            }
            slotProps={{ seeMoreText: { lines: 8 } }}
            sx={{
              '& span': { color: palette.textColors?.neutralTextLighter },
              '& button': {
                mt: 0.5,
                '&:hover': { backgroundColor: 'transparent' },
              },
            }}
          />
        </Stack>
        <FormCoverPictureUploader
          name={newPathFields.basic_information.coverPicture()}
          uploaderProps={{
            defaultSrc: defaultPathCover,
            maxSize: FILE_MAX_SIZE,
            recommendedSizeTooltip: {
              format: ['JPG', 'PNG'],
              size: '800x400',
            },
            sx: {
              width: '100%',
              minWidth: '372px',
              maxWidth: '372px',
              '& .HuCoverPictureUploader-image': { p: 0 },
            },
            onFileChange: handleOnCoverPictureChange,
          }}
        />
      </Stack>
    </LearningCard>
  );
};

export default PathCoverPicture;
