import { FormDropTypes } from '@material-hu/components/deprecated/FormDrop/types';

import TaskLayout from 'src/pages/dashboard/Learning/Courses/New/components/TaskLayout';
import { SCORM_MAX_SIZE } from 'src/pages/dashboard/Learning/Courses/New/constants';
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 FormDrop from 'src/components/FormInputs/FormDrop';

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

export const TaskScorm = ({ selected, disabled }: TaskScormProps) => {
  const { t } = useLokaliseTranslation('learning');

  const tasksName = newCourseFields.content.modules.tasks;

  return (
    <TaskLayout.Container>
      <TaskLayout.Content>
        <FormDrop
          name={tasksName.scorm.zip.all(selected.module, selected.task)}
          type={FormDropTypes.FILE}
          linkLabel={() => t('course.scorm.upload')}
          helpTextLabel={() => t('course.scorm.format')}
          accept={{ 'application/zip': [] }}
          maxSize={SCORM_MAX_SIZE}
        />
      </TaskLayout.Content>
      <TaskLayout.Attachments
        selected={selected}
        disabled={disabled}
      />
    </TaskLayout.Container>
  );
};

export default TaskScorm;
