import React from 'react';

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

import logo from 'src/assets/images/logoBanBajio.webp';
import logoFiba from 'src/assets/images/logoFiBajio.webp';
import AmountInfoTable from 'src/pages/dashboard/banBajio/components/advancePayment/AmountInfoTable';
import BossInfoTable from 'src/pages/dashboard/banBajio/components/advancePayment/BossInfoTable';
import UserInfoTable from 'src/pages/dashboard/banBajio/components/advancePayment/UserInfoTable';

import HiringDateTable from './components/advancePayment/HiringDateTable';

export type AdvancePaymentProps = {
  payroll: string;
  bankAccount: string;
  amount: string;
  bossName: string;
  bossPosition: string;
  isFiba: boolean;
};

const AdvancePayment = React.forwardRef<HTMLDivElement, AdvancePaymentProps>(
  (props, ref) => {
    const { payroll, bankAccount, amount, bossName, bossPosition, isFiba } =
      props;

    return (
      <Stack
        ref={ref}
        sx={{
          backgroundColor: '#fff',
          width: '794px',
        }}
      >
        <Stack>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              width: '100%',
              alignItems: 'center',
            }}
          >
            <img
              src={isFiba ? logoFiba : logo}
              alt="Logo"
              style={{ width: '160px', height: 'auto' }}
            />
            <Typography sx={{ fontWeight: 600 }}>ANTICIPO QUINCENA</Typography>
            <Box />
          </Stack>
          <Stack
            sx={{
              width: '100%',
              flexDirection: 'row',
              justifyContent: 'flex-end',
            }}
          >
            <HiringDateTable />
          </Stack>
          <Stack sx={{ mt: 3 }}>
            <UserInfoTable payroll={payroll} />
          </Stack>
          <AmountInfoTable amount={amount} />
          <BossInfoTable
            bossName={bossName}
            bossPosition={bossPosition}
            bankAccount={bankAccount}
          />
        </Stack>
      </Stack>
    );
  },
);

AdvancePayment.displayName = 'AdvancePayment';

export default AdvancePayment;
