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

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuTitle from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import { useMobile } from 'src/contexts/MobileContext';
import useFormatDate from 'src/hooks/useFormatDate';
import useRules from 'src/hooks/useRules';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import BanBajioGrid from './components/BanBajioGrid';
import LoanRequestsLayout from './LoanRequestsLayout';
import { useDynamicFields } from './useDynamicFields';

type LoanRequestsStep3Props = {
  onGoToNextStep: () => void;
  onGoToPreviousStep: () => void;
  loadingNextStep?: boolean;
};

const LoanRequestsStep3: FC<LoanRequestsStep3Props> = ({
  onGoToNextStep,
  onGoToPreviousStep,
  loadingNextStep,
}) => {
  const { user } = useAuth();
  const { t } = useLokaliseTranslation('banbajio');
  const { formatDate } = useFormatDate();
  const { isMobile } = useMobile();

  const form = useFormContext();

  const { data: profileData } = useDynamicFields();

  const rules = useRules({
    requiredWithMessage: true,
  });

  if (!profileData) return <HuSpinner />;

  const personalInfo = [
    { value: getFullName(user), label: 'FULL_NAME' },
    {
      value: user?.birthdate ? formatDate(user.birthdate) : '—',
      label: 'BIRTHDAY',
    },
    {
      value: profileData.rfc,
      label: 'RFC',
    },
    {
      value: profileData.department,
      label: 'DEPARTMENT',
    },
    {
      value: profileData.jobPosition,
      label: 'POSITION',
    },
    { value: user?.hiringDate, label: 'HIRING_DATE' },
  ];

  const residentialInfo = [
    {
      value: profileData.street,
      label: 'STREET',
    },
    {
      value: profileData.streetNumber,
      label: 'STREET_NUMBER',
    },
    {
      value: profileData.cologne,
      label: 'COLOGNE',
    },
    {
      value: profileData.state,
      label: 'STATE',
    },
    {
      value: profileData.city,
      label: 'CITY',
    },
    {
      value: profileData.municipality,
      label: 'MUNICIPALITY',
    },
    {
      value: profileData.postalCode,
      label: 'POSTAL_CODE',
    },
  ];

  return (
    <LoanRequestsLayout
      onGoToNextStep={async () => {
        if (!(await form?.trigger())) {
          return;
        }
        onGoToNextStep();
      }}
      onGoToPreviousStep={onGoToPreviousStep}
      currentStep={2}
      nextStepLabel={t('SEND_REQUEST')}
      loadingNextStep={loadingNextStep}
    >
      <HuTitle
        title={t('LOAN_INFO')}
        variant="M"
      />
      <HuCardContainer sx={{ width: '100%', mt: 1, mb: 3 }}>
        <Stack sx={{ flexDirection: isMobile ? 'column' : 'row', gap: 2 }}>
          <HuFormInputClassic
            name="loanInfo"
            inputProps={{
              label: t('LOAN_GOOD_DESCRIPTION'),
              placeholder: t('WRITE_HERE'),
              maxLength: 100,
            }}
            rules={rules}
          />
          <HuFormInputClassic
            name="sellerInfo"
            inputProps={{
              label: t('SELLER_DETAILS'),
              placeholder: t('WRITE_HERE'),
              maxLength: 100,
            }}
            rules={rules}
          />
        </Stack>
      </HuCardContainer>
      <HuTitle
        title={t('PERSONAL_INFO')}
        variant="M"
      />
      <HuCardContainer sx={{ width: '100%', mt: 1, mb: 3 }}>
        <BanBajioGrid data={personalInfo} />
      </HuCardContainer>
      <HuTitle
        title={t('RESIDENTIAL_INFO')}
        variant="M"
      />
      <HuCardContainer sx={{ width: '100%', mt: 1, mb: 3 }}>
        <BanBajioGrid data={residentialInfo} />
      </HuCardContainer>
    </LoanRequestsLayout>
  );
};

export default LoanRequestsStep3;
