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

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { SATISFACTION_SURVEY_COMMENTS_MAX_LENGTH } from 'src/pages/dashboard/Learning/Courses/New/constants';
import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormNumberRating from 'src/components/FormInputs/FormNumberRating';
import FormTextField from 'src/components/FormInputs/FormTextField';
import FormThumbRating from 'src/components/FormInputs/FormThumbRating';
import { Severities, SeverityPill } from 'src/components/SeverityPill';

export const SatisfactionSurveyForm = () => {
  const { t } = useLokaliseTranslation('learning');
  const { control } = useFormContext();

  const courseName = useWatch({
    control,
    name: newCourseFields.basicInformation.title(),
  });

  return (
    <Stack sx={{ gap: 2 }}>
      <SeverityPill
        label={courseName}
        severity={Severities.INFO}
        sx={{ alignSelf: 'flex-start' }}
      />
      <Stack
        sx={{
          borderRadius: 1,
          p: 2,
          gap: 3,
          backgroundColor: '#f2f4f7',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          '& > *': {
            gap: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            '& > .MuiTypography-root': {
              textAlign: 'center',
              color: '#6C737F',
            },
          },
        }}
      >
        <Stack>
          <Typography
            id="course-content-rating-label"
            variant="body1"
          >
            {t('reports.survey.content_rating.label')}
          </Typography>
          <FormNumberRating
            name={newCourseFields.configuration.satisfactionSurveyModel.contentRating()}
            readOnly
            fullWidth
            lowHelperText={t('reports.survey.content_rating.values.1')}
            highHelperText={t('reports.survey.content_rating.values.5')}
          />
        </Stack>
        <Stack>
          <Typography
            id="course-experience-rating-label"
            variant="body1"
          >
            {t('reports.survey.experience_rating.label')}
          </Typography>
          <FormNumberRating
            name={newCourseFields.configuration.satisfactionSurveyModel.experienceRating()}
            readOnly
            fullWidth
            lowHelperText={t('reports.survey.experience_rating.values.1')}
            highHelperText={t('reports.survey.experience_rating.values.5')}
          />
        </Stack>
        <Stack>
          <Typography
            id="course-recommendation-toggle-label"
            variant="body1"
          >
            {t('reports.recomendation_question')}
          </Typography>
          <FormThumbRating
            name={newCourseFields.configuration.satisfactionSurveyModel.recommendation()}
            readOnly
          />
        </Stack>
      </Stack>
      <Stack
        sx={{
          gap: 1,
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          '& > .MuiTypography-root': {
            textAlign: 'center',
            color: '#6C737F',
          },
        }}
      >
        <Typography
          id="course-comments-label"
          variant="body1"
        >
          {t('reports.survey.feedback_label')}
        </Typography>
        <FormTextField
          name={newCourseFields.configuration.satisfactionSurveyModel.comments()}
          placeholder={t('common.comments_label')}
          showCounter
          maxLength={SATISFACTION_SURVEY_COMMENTS_MAX_LENGTH}
          InputProps={{ readOnly: true }}
        />
      </Stack>
    </Stack>
  );
};

export default SatisfactionSurveyForm;