import { type PropsWithChildren } from 'react';

import Stack, { type StackProps } from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import {
  FILE_MAX_SIZE,
  TASK_DESCRIPTION_MAX_LENGTH,
} 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 FormAddDescription from 'src/components/FormInputs/FormAddDescription';
import FormDropAttachments from 'src/components/FormInputs/FormDropAttachments';

export type ContainerProps = PropsWithChildren<StackProps>;

export const Container = ({ children, ...stackProps }: ContainerProps) => {
  return (
    <Stack
      {...stackProps}
      sx={{ gap: 4, ...stackProps?.sx }}
    >
      {children}
    </Stack>
  );
};

export type DescriptionProps = StackProps & {
  disabled?: boolean;
  selected: Selected;
};

export const Description = ({
  disabled = false,
  selected,
  ...stackProps
}: DescriptionProps) => {
  const { t } = useLokaliseTranslation('learning');

  const descriptionName = newCourseFields.content.modules.tasks.description(
    selected.module,
    selected.task,
  );

  return (
    <Stack
      {...stackProps}
      sx={{ gap: 2.5, width: '100%', ...stackProps?.sx }}
    >
      <FormAddDescription
        name={descriptionName}
        disabled={disabled}
        openLabel={t('common.add_description')}
        closeLabel={t('common.remove_description')}
        placeholder={t('course.lesson.description_placeholder')}
        showCounter
        maxLength={TASK_DESCRIPTION_MAX_LENGTH}
      />
    </Stack>
  );
};

export type ContentProps = PropsWithChildren<StackProps>;

export const Content = ({ children, ...stackProps }: ContentProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Stack
      {...stackProps}
      sx={{ gap: 2, ...stackProps?.sx }}
    >
      <Typography variant="h6">{t('general:content')}</Typography>
      {children}
    </Stack>
  );
};

export type AttachmentsProps = StackProps & {
  disabled?: boolean;
  selected: Selected;
};

export const Attachments = ({
  disabled = false,
  selected,
  ...stackProps
}: AttachmentsProps) => {
  const { t } = useLokaliseTranslation('learning');

  const attachmentsName = newCourseFields.content.modules.tasks.drops.all(
    selected.module,
    selected.task,
  );

  return (
    <Stack
      {...stackProps}
      sx={{ gap: 3, ...stackProps?.sx }}
    >
      <Stack sx={{ gap: 1 }}>
        <Typography variant="h6">{t('general:attachments')}</Typography>
        <Typography variant="body1">
          {t('course.lesson.attachments_description')}
        </Typography>
      </Stack>
      <Stack sx={{ gap: 3, py: 2, px: 0 }}>
        <FormDropAttachments
          name={attachmentsName}
          disabled={disabled}
          maxSize={FILE_MAX_SIZE}
          dropZoneProps={{ noClick: true }}
          exclude={{ 'video/webm': [] }}
        />
      </Stack>
    </Stack>
  );
};

export const TaskLayout = {
  Container,
  Description,
  Content,
  Attachments,
};

export default TaskLayout;