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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import FormDatePicker from '@material-hu/components/design-system/Inputs/DatePicker/form';
import Title from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { requiredLabel } from 'src/utils/stringUtils';

import { jobDetailCandidateFormFields as getJobDetailCandidateFormFields } from '../constants';
import { getMaxTodayDate } from '../dateUtils';
import {
  type ApplicationSource,
  type ApplicationStage,
  type HiringPipelineWithCountResponse,
  StageTypes,
} from '../types';
import { getProcessStageNameFromBackend } from '../utils';

type JobDetailsFormProps = {
  applicationSources: ApplicationSource[];
  stages: ApplicationStage[] | HiringPipelineWithCountResponse[];
  type: 'edit' | 'create';
};

export const JobDetailsForm = ({
  applicationSources,
  stages,
  type,
}: JobDetailsFormProps) => {
  const { t } = useLokaliseTranslation('ats');
  const jobDetailCandidateFormFields = getJobDetailCandidateFormFields(t);

  return (
    <CardContainer
      fullWidth
      elevation={0}
      padding={24}
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.default,
      }}
    >
      <Stack sx={{ gap: 2 }}>
        <Title
          title={t('job_application.job_details')}
          variant="M"
          sx={{ mb: 1 }}
        />
        {type === 'create' && (
          <FormAutocomplete
            name={jobDetailCandidateFormFields.stage.name}
            options={stages
              .filter(
                ({ stageType }) => stageType !== StageTypes.OFFER_ACCEPTED,
              )
              .map(({ id: value }) => ({
                label: getProcessStageNameFromBackend(value, stages, t),
                value,
              }))}
            autocompleteProps={{
              label: requiredLabel(t('job_candidates.new.fields.stage.label')),
              placeholder: t('general:select'),
              isServerFiltered: false,
              disableClearable: true,
            }}
          />
        )}
        {type === 'create' && (
          <FormDatePicker
            name={jobDetailCandidateFormFields.applicationDate.name}
            inputProps={{
              label: requiredLabel(
                t('job_candidates.new.fields.application_date.label'),
              ),
              enableClear: false,
              maxDate: getMaxTodayDate(),
            }}
          />
        )}
        <FormAutocomplete
          name={jobDetailCandidateFormFields.source.name}
          options={applicationSources.map(({ id, name }) => ({
            label: name,
            value: id,
          }))}
          autocompleteProps={{
            label: requiredLabel(t('job_candidates.new.fields.source.label')),
            placeholder: t('general:select'),
            isServerFiltered: false,
            disableClearable: true,
          }}
        />
      </Stack>
    </CardContainer>
  );
};