Untitled

import { actionStyles, backButtonStyles } from '../../../../clients/legal-entity/legalEntityPage';
import { analysesHeader } from '../keypersonNeeds';
import { Box, Button, Typography } from '@mui/material';
import { checkValueZero } from '../../../../common/helpers/functions';
import { FNAAnalyses, FNAParties } from '../../../../common/types/analyses';
import { GridColumns, GridRowModel, GridRowsProp } from '@mui/x-data-grid';
import { useCallback, useEffect, useState } from 'react';
import {
  useCreateNewSuretyshipParties,
  useUpdateNewSuretyshipParties,
} from '../../../../common/components/mutations';
import CommonTable from '../../../../common/components/commonTable';
import CustomEditComponent from './editEstateDutyCell';
import EditSettings from '../editSettings';
import ResultsCalculation from '../resultsCalculation';

const SuretyshipNeeds = ({
  setStartName,
  setTab,
  broker,
}: {
  setStartName: React.Dispatch<React.SetStateAction<string>>;
  setTab: React.Dispatch<React.SetStateAction<number>>;
  broker: FNAAnalyses;
}) => {
  const [results, setResults] = useState(false);
  const [rows, setRows] = useState<GridRowsProp>([]);
  const columns: GridColumns = [
    {
      field: 'partyRoleplayerName',
      headerName: 'Name',
      editable: true,
      flex: 1,
      headerAlign: 'left',
      align: 'left',
      minWidth: 250,
      renderCell: ({ row }) => {
        return (
          <Typography fontWeight={500} variant="body1">
            {row.partyRoleplayerName}
          </Typography>
        );
      },
    },
    {
      field: 'existingprovision',
      headerName: 'Existing provision',
      minWidth: 150,
      editable: true,
      headerAlign: 'center',
      align: 'center',
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.existingprovision)}</Typography>;
      },
    },
    {
      field: 'isBenefits',
      headerName: 'Ancillary benefits',
      editable: true,
      minWidth: 150,
      headerAlign: 'center',
      align: 'center',
      type: 'singleSelect',
      valueGetter: ({ value }) => (value ? 'Yes' : 'No'),
      valueOptions: ['Yes', 'No'],
    },
    {
      field: 'bonds',
      headerName: 'Bonds',
      editable: true,
      minWidth: 150,
      headerAlign: 'center',
      align: 'center',
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.bonds)}</Typography>;
      },
    },
    {
      field: 'overdrafts',
      headerName: 'Overdrafts',
      editable: true,
      minWidth: 150,
      headerAlign: 'center',
      align: 'center',
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.overdrafts)}</Typography>;
      },
    },
    {
      field: 'leases',
      headerName: 'Leases',
      editable: true,
      minWidth: 150,
      headerAlign: 'center',
      align: 'center',
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.leases)}</Typography>;
      },
    },
    {
      field: 'hirepurchases',
      headerName: 'Hire purchases',
      editable: true,
      headerAlign: 'center',
      align: 'center',
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.hirepurchases)}</Typography>;
      },
    },
    {
      field: 'loansLongterm',
      headerAlign: 'center',
      align: 'center',
      headerName: 'Long-term loans',
      editable: true,
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.loansLongterm)}</Typography>;
      },
    },
    {
      field: 'loansPersonal',
      headerAlign: 'center',
      align: 'center',
      headerName: 'Personal loans',
      editable: true,
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.loansPersonal)}</Typography>;
      },
    },
    {
      field: 'creditors',
      headerAlign: 'center',
      align: 'center',
      headerName: 'Creditors',
      editable: true,
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.creditors)}</Typography>;
      },
    },
    {
      field: 'other',
      headerAlign: 'center',
      align: 'center',
      headerName: 'Other',
      editable: true,
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{checkValueZero(row.other)}</Typography>;
      },
    },
    {
      field: 'estatedutyRate',
      headerAlign: 'center',
      align: 'center',
      headerName: 'Estate Duty Rate',
      editable: true,
      minWidth: 150,
      flex: 1,
      renderCell: ({ row }) => {
        return <Typography>{row.estatedutyRate > 0 ? `${row.estatedutyRate}%` : '-'}</Typography>;
      },
      renderEditCell: (parameters) => <CustomEditComponent params={parameters} />,
    },
  ];
  const mutation = useUpdateNewSuretyshipParties();
  const mutationCreate = useCreateNewSuretyshipParties();

  console.log(
    broker.parties,
    broker.suretyshipParties,
    broker.parties.filter(
      (el: FNAParties) => !broker.suretyshipParties.some((party) => el.id === party.fnaPartyID),
    ),
    'post',
  );
  const save = () => {
    const parties = broker.parties.filter(
      (el: FNAParties) => !broker.suretyshipParties.some((party) => el.id === party.fnaPartyID),
    );

    if (broker.parties.length > broker.suretyshipParties.length) {
      parties.flatMap((party: FNAParties, index: number) => {
        const el = rows[index];
        const suretyshipParty = broker?.suretyshipParties[index];
        const isEstateduty = Number(el.estatedutyRate) > 0 ? true : false;
        const isBenefits = el.isBenefits === 'Yes' ? true : false;
        return mutationCreate.mutate({
          id: suretyshipParty?.id || 0,
          fnaPartyID: party.id,
          existingprovision: Number(el.existingprovision) || 0,
          estatedutyRate: Number(el.estatedutyRate) || 0,
          isEstateduty,
          isBenefits,
          bonds: Number(el.bonds) || 0,
          overdrafts: Number(el.overdrafts) || 0,
          leases: Number(el.leases) || 0,
          hirepurchases: Number(el.hirepurchases) || 0,
          loansLongterm: Number(el.loansLongterm) || 0,
          loansPersonal: Number(el.loansPersonal) || 0,
          creditors: Number(el.creditors) || 0,
          other: Number(el.other) || 0,
          roleplayerID: party.roleplayerID,
          partyRoleplayerID: party.partyRoleplayerID,
        });
      });
    }

    broker.suretyshipParties.flatMap((party: any, index: number) => {
      const el = rows[index];
      const suretyshipParty = broker?.suretyshipParties[index];
      const isEstateduty = Number(el.estatedutyRate) > 0 ? true : false;
      const isBenefits = el.isBenefits === 'Yes' ? true : false;
      return mutation.mutate({
        id: suretyshipParty?.id || 0,
        fnaPartyID: party.id,
        existingprovision: Number(el.existingprovision) || 0,
        estatedutyRate: Number(el.estatedutyRate) || 0,
        isEstateduty,
        isBenefits,
        bonds: Number(el.bonds) || 0,
        overdrafts: Number(el.overdrafts) || 0,
        leases: Number(el.leases) || 0,
        hirepurchases: Number(el.hirepurchases) || 0,
        loansLongterm: Number(el.loansLongterm) || 0,
        loansPersonal: Number(el.loansPersonal) || 0,
        creditors: Number(el.creditors) || 0,
        other: Number(el.other) || 0,
        roleplayerID: party.roleplayerID,
        partyRoleplayerID: party.partyRoleplayerID,
      });
    });
  };
  useEffect(() => {
    //show parties without values if suretysip partys doesn't exist
    if (broker.suretyshipParties.length > 0) {
      const parties = broker.parties.filter(
        (el) => !broker.suretyshipParties.some((party) => el.id === party.fnaPartyID),
      );
      if (broker.suretyshipParties.length !== broker.parties.length) {
        setRows([...broker.suretyshipParties, ...parties]);
      } else {
        setRows(broker.suretyshipParties);
      }
    } else {
      setRows(broker.parties);
    }
  }, [broker.parties, broker.suretyshipParties]);

  const processRowUpdate = useCallback(
    async (newRow: GridRowModel) => {
      await new Promise((resolve) => {
        setTimeout(resolve, 300);
      });
      const updatedRow = { ...newRow, isNew: false };
      setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
      return updatedRow;
    },
    [rows],
  );

  return (
    <>
      {results ? (
        <ResultsCalculation
          title="Suretyship"
          needs={broker.suretyshipParties}
          setTab={setTab}
          setStartName={setStartName}
        />
      ) : (
        <>
          <Box p={3} display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-between">
              <Box display="flex" pb={4} alignItems="center">
                <Typography ml={1} variant="h2">
                  Suretyship needs
                </Typography>
              </Box>
              <Button
                onClick={() => {
                  save();
                  setStartName('');
                  setTab(3);
                }}
                sx={{ height: '35px' }}
                variant="outlined"
                color="primary"
              >
                Save and exit
              </Button>
            </Box>
            <Box display="flex" flexDirection={{ xs: 'column', md: 'row' }}>
              <Box sx={analysesHeader} mb={4} flexDirection="column">
                <Box ml={3} display="flex">
                  <Typography>Reference number </Typography>
                  <Typography ml={1} fontWeight={800}>
                    {broker.id}
                  </Typography>
                </Box>
                <Box ml={3} display="flex">
                  <Typography>Status</Typography>
                  <Typography ml={1} fontWeight={800}>
                    {broker.stateName}
                  </Typography>
                </Box>
              </Box>
              <Box sx={analysesHeader} mb={{ xs: 0, md: 4 }} ml={{ xs: 0, md: 5 }}>
                <Typography ml={3} fontWeight={800}>
                  For:
                </Typography>
                <Box display="flex" flexDirection="column">
                  <Box ml={1} display="flex">
                    <Typography ml={1} fontWeight={800}>
                      {broker.roleplayers?.[0]?.roleplayerName}
                    </Typography>
                  </Box>
                </Box>
              </Box>
            </Box>
          </Box>
          <Box sx={{ width: '100%' }}>
            <Box
              flexDirection={{ xs: 'column', sm: 'row' }}
              display="flex"
              sx={{
                backgroundColor: 'background.default',
              }}
            >
              <Box p={3} display="flex" flexDirection="column">
                <Typography fontWeight={700} ml={1}>
                  Settings
                </Typography>
                <Box display="flex">
                  <Box sx={analysesHeader} flexDirection="column" mt={1}>
                    <Box ml={3} display="flex">
                      <Typography>Provide for estate duty</Typography>
                      <Typography ml={1} fontWeight={800}>
                        {broker?.suretyships?.[0]?.isEstateduty ? 'Yes' : 'No'}
                      </Typography>
                    </Box>
                    <Box ml={3} display="flex">
                      <Typography>Rate</Typography>
                      <Typography ml={1} fontWeight={800}>
                        {broker?.suretyships?.[0]?.estatedutyRate}
                      </Typography>
                    </Box>
                  </Box>
                </Box>
              </Box>
              <Box p={3}>
                <Box sx={analysesHeader} mt={1} justifyContent="center" alignItems="center">
                  <EditSettings broker={broker} title="Suretyship needs settings" />
                </Box>
              </Box>
            </Box>
          </Box>
          <Typography pl={3} pt={3} fontWeight={700}>
            Suretyship needs
          </Typography>
          <CommonTable
            processRowUpdate={processRowUpdate}
            columns={columns}
            rows={rows}
            checkboxSelection={false}
            height={54}
            experimentalFeature={{ newEditingApi: true }}
          />
          <Box sx={actionStyles} justifyContent="space-between">
            <Button
              sx={backButtonStyles}
              onClick={() => {
                setStartName('');
                setTab(3);
              }}
              variant="outlined"
              color="primary"
            >
              Back
            </Button>
            <Button
              onClick={() => {
                save();
                setResults(true);
              }}
              variant="outlined"
              color="primary"
            >
              Calculate cover required
            </Button>
          </Box>
        </>
      )}
    </>
  );
};
export default SuretyshipNeeds;