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

import { parsePhoneNumberFromString } from 'libphonenumber-js';
import Stack from '@material-hu/mui/Stack';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import FormInputPhone from '@material-hu/components/design-system/Inputs/Phone/form';
import Title from '@material-hu/components/design-system/Title';

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

import {
  jobDetailCandidateFormFields as getJobDetailCandidateFormFields,
  INPUT_MAX_LENGTH,
} from '../../constants';
import { type FileCardTypeWithId } from '../../types';

import { CVUploader } from './CVUploader';

export const ApplicantPersonalInfoForm = ({
  onUploadFile,
}: {
  onUploadFile: (file: File) => Promise<FileCardTypeWithId>;
}) => {
  const { t } = useLokaliseTranslation('ats');
  const { setValue } = useFormContext();
  const jobDetailCandidateFormFields = getJobDetailCandidateFormFields(t);

  const handlePhonePaste = (e: ClipboardEvent<HTMLDivElement>) => {
    const pastedText = e.clipboardData.getData('text').trim();
    if (/^\+\d/.test(pastedText)) {
      const phoneNumber = parsePhoneNumberFromString(pastedText);
      if (phoneNumber) {
        e.preventDefault();
        setValue(
          jobDetailCandidateFormFields.phone.name,
          phoneNumber.formatInternational(),
          { shouldValidate: true, shouldDirty: true },
        );
      }
    }
  };

  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.personal_information')}
          variant="M"
          sx={{ mb: 1 }}
        />
        <FormInputClassic
          name={jobDetailCandidateFormFields.firstName.name}
          inputProps={{
            label: jobDetailCandidateFormFields.firstName.label,
            placeholder: jobDetailCandidateFormFields.firstName.placeholder,
            hasCounter: false,
            maxLength: INPUT_MAX_LENGTH,
          }}
        />
        <FormInputClassic
          name={jobDetailCandidateFormFields.lastName.name}
          inputProps={{
            label: jobDetailCandidateFormFields.lastName.label,
            placeholder: jobDetailCandidateFormFields.lastName.placeholder,
            hasCounter: false,
            maxLength: INPUT_MAX_LENGTH,
          }}
        />
        <FormInputPhone
          disabled={false}
          name={jobDetailCandidateFormFields.phone.name}
          inputProps={{
            label: jobDetailCandidateFormFields.phone.label,
            showErrors: true,
            success: false,
            onPaste: handlePhonePaste,
            sx: {
              '& .MuiInputBase-input, & .MuiButtonBase-root': {
                backgroundColor: theme =>
                  theme.palette.new.background.layout.tertiary,
              },
            },
            showSuccessOnSubmitted: false,
          }}
        />
        <FormInputClassic
          name={jobDetailCandidateFormFields.email.name}
          inputProps={{
            label: jobDetailCandidateFormFields.email.label,
            placeholder: jobDetailCandidateFormFields.email.placeholder,
            hasCounter: false,
            maxLength: INPUT_MAX_LENGTH,
          }}
        />
        <CVUploader onUploadFile={onUploadFile} />
      </Stack>
    </CardContainer>
  );
};