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

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

import TaskLayout from 'src/pages/dashboard/Learning/Courses/New/components/TaskLayout';
import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { type Selected } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormRichEditor from 'src/components/FormInputs/FormRichEditor';

export type TaskBlankProps = {
  disabled?: boolean;
  selected: Selected;
};

export const TaskBlank = ({ disabled = false, selected }: TaskBlankProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { watch } = useFormContext();

  const tasksName = newCourseFields.content.modules.tasks;
  const bodyName = tasksName.body(selected.module, selected.task);
  const body = watch(bodyName);

  return (
    <TaskLayout.Container>
      <TaskLayout.Description
        disabled={disabled}
        selected={selected}
      />
      <TaskLayout.Content>
        <Stack sx={{ gap: 1 }}>
          <FormRichEditor
            disabled={disabled}
            name={bodyName}
            placeholder={`${t('general:write_answer')}...`}
            editorProps={{
              value: body,
              init: { sandbox_iframes: false },
            }}
          />
          {(!body || body?.length <= 0) && (
            <Typography
              variant="caption"
              color="error"
              sx={{ fontWeight: 400 }}
            >
              {t('course.lesson.complete_pending')}
            </Typography>
          )}
        </Stack>
      </TaskLayout.Content>
      <TaskLayout.Attachments
        selected={selected}
        disabled={disabled}
      />
    </TaskLayout.Container>
  );
};

export default TaskBlank;