// The texts are not translated because they must always be in spanish
import React from 'react';
import { useFormContext } from 'react-hook-form';

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

import logoBanBajio from 'src/assets/images/logoBanBajio.webp';
import logoFiba from 'src/assets/images/logoFiBajio.webp';
import { useAuth } from 'src/contexts/JWTContext';
import { capitalize, getLoanName } from 'src/utils/banBajio';
import { getBanBajioCurrentDate } from 'src/utils/date';
import { getFullName } from 'src/utils/userUtils';

import { useDynamicFields } from './useDynamicFields';

const BossSupportLetter = React.forwardRef<HTMLDivElement>((props, ref) => {
  const { data: profileData } = useDynamicFields();
  const { department, jobPosition, city, state, boss, bossPosition, isFiba } =
    profileData!;
  const loanType = useFormContext().watch('loanType');
  const { user } = useAuth();
  const name = getFullName(user);

  const commonTextStyle = {
    fontFamily: 'Roboto',
    fontSize: '18px',
  };

  const currentDate = getBanBajioCurrentDate();
  const { day, month, year } = currentDate;

  return (
    <Stack
      ref={ref}
      sx={{
        backgroundColor: '#fff',
        width: '794px',
      }}
    >
      <Stack
        sx={{ width: '100%', flexDirection: 'row', justifyContent: 'center' }}
      >
        <img
          src={isFiba ? logoFiba : logoBanBajio}
          alt="Logo"
          style={{ width: '230px' }}
        />
      </Stack>
      <Stack
        sx={{
          mt: 3,
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'flex-end',
        }}
      >
        <Typography sx={{ ...commonTextStyle, fontWeight: 600 }}>
          {`${capitalize(city)}, ${capitalize(state)}. A ${day} de ${month} de ${year}`}
        </Typography>
      </Stack>
      <Stack
        sx={{
          mt: 3,
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        <Typography sx={commonTextStyle}>
          Gerencia de Beneficios al Personal
        </Typography>
      </Stack>
      <Stack
        sx={{
          mt: 0.5,
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        <Typography sx={commonTextStyle}>Presente</Typography>
      </Stack>
      <Stack
        sx={{
          mt: '60px',
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        <Typography
          sx={{ ...commonTextStyle, textIndent: '4em', textAlign: 'justify' }}
        >
          Por medio de la presente hago constar que el desempeño mostrado por{' '}
          {capitalize(name)} dentro de la {capitalize(department)}, teniendo el
          puesto de {capitalize(jobPosition)} ha sido de manera satisfactoria y
          ha cumplido con todas sus obligaciones, por lo que apoyo el
          otorgamiento del préstamo de {getLoanName(loanType.loanType)} que está
          solicitando.
        </Typography>
      </Stack>
      <Stack
        sx={{
          mt: '60px',
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        <Typography sx={{ ...commonTextStyle, textIndent: '4em' }}>
          Sin más por el momento me despido agradeciendo sus atenciones,
        </Typography>
      </Stack>
      <Stack sx={{ mt: 4, width: '100%', alignItems: 'center' }}>
        <Typography sx={commonTextStyle}>Atte.</Typography>
        <Typography sx={{ ...commonTextStyle, fontWeight: 600 }}>
          {boss}
        </Typography>
        <Typography sx={{ ...commonTextStyle, fontWeight: 600 }}>
          {bossPosition}
        </Typography>
      </Stack>
    </Stack>
  );
});

BossSupportLetter.displayName = 'BossSupportLetter';

export default BossSupportLetter;
