FPSMS-frontend/src/components/JoSave/ActionButtons.tsx

import { JoDetail } from "@/app/api/jo";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useMemo } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StartIcon from "@mui/icons-material/Start";
import PlayCircleFilledWhiteIcon from '@mui/icons-material/PlayCircleFilledWhite';

type Props = {
    handleRelease: () => void;
    handleStart: () => void;
};

interface ErrorEntry {
    qtyErr: boolean;
    scanErr: boolean;
}

const ActionButtons: React.FC<Props> = ({
    handleRelease,
    handleStart
}) => {
    const { t } = useTranslation("jo");

    const { watch } = useFormContext<JoDetail>();

    const status = useMemo(() => {
        return watch("status").toLowerCase()
    }, [watch("status")])

    const pickLines = useMemo(() => {
        return watch("pickLines")
    }, [watch("pickLines")])

    // Check Error Handling (e.g. start jo)
    const errors: ErrorEntry = useMemo(() => {
        let qtyErr = false;
        let scanErr = false;

        pickLines.forEach((line) => {
            if (!qtyErr) {
                const pickedQty = line.pickedLotNo?.reduce((acc, cur) => acc + cur.qty, 0) ?? 0
                qtyErr = pickedQty > 0 && pickedQty >= line.reqQty
            }

            if (!scanErr) {
                scanErr = line.pickedLotNo?.some((lotNo) => Boolean(lotNo.isScanned) === false) ?? false // default false
            }
        })

        return {
            qtyErr: qtyErr,
            scanErr: scanErr
        }
    }, [pickLines])

    return (
        <Stack direction="row" justifyContent="flex-start" gap={1}>
            {status === "planning" && (
                <Button
                    variant="outlined"
                    startIcon={<StartIcon />}
                    onClick={handleRelease}
                >
                    {t("Release")}
                </Button>
            )}
            {status === "pending" && (
                <Box sx={{ flexDirection: 'column'}}>
                    <Button
                        variant="outlined"
                        startIcon={<PlayCircleFilledWhiteIcon />}
                        onClick={handleStart}
                        disabled={errors.qtyErr || errors.scanErr}
                    >
                        {t("Start Job Order")}
                    </Button>
                    {errors.scanErr && (<Typography variant="h3" color="error">{t("Please scan the item qr code.")}</Typography>)}
                    {errors.qtyErr && (<Typography variant="h3" color="error">{t("Please make sure the qty is enough.")}</Typography>)}
                </Box>
            )}
        </Stack>
    )
}

export default ActionButtons;