import { Box } from "@mui/material";
import ReferPassengerBoss from "./Form/ReferPassengerBoss";
import UserInfoForm from "./Form/UserInfoForm";
import PlanningCouncilForm from "./Form/PlanningCouncilForm";
import ComebackLoanDetail from "./Form/ComebackLoanDetail";
import BankPayment from "./Form/BankPayment";
import ApprovedBankLoan from "./Form/ApprovedBankLoan";

const TableRow = ({ row, mutate }) => {
    return (
        <Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
            <UserInfoForm rowId={row.getValue("id")} row={row} />
            {[11, 12, 13, 14, 15, 16].includes(row.original.state_id) && (
                <PlanningCouncilForm rowId={row.getValue("id")} />
            )}

            {row.original.state_id === 16 && <ComebackLoanDetail rowId={row.getValue("id")} />}

            {row.original.state_id === 15 && <BankPayment rowId={row.getValue("id")} />}

            {row.original.state_id === 14 || row.original.state_id === 15 ? (
                <ApprovedBankLoan rowId={row.getValue("id")} />
            ) : null}

            {row.original.state_id === 11 || row.original.state_id === 16 ? (
                <ReferPassengerBoss rowId={row.getValue("id")} mutate={mutate} />
            ) : null}
        </Box>
    );
};
export default TableRow;