frontend/src/components/infrastructure/tollHouse/Form/CreateTollHouse/CreateTollHouseContent.jsx

import StyledForm from "@/core/components/StyledForm";
import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
import BeenhereIcon from "@mui/icons-material/Beenhere";
import OtherHousesIcon from "@mui/icons-material/OtherHouses";
import LocalShippingIcon from "@mui/icons-material/LocalShipping";
import EditLocationAltIcon from "@mui/icons-material/EditLocationAlt";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { mixed, number, object, string } from "yup";
import TollHouseInfo from "./TollHouseInfo";
import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
import MachineInfo from "@/components/infrastructure/tollHouse/Form/CreateTollHouse/MachineInfo";
import TollHouseLocation from "@/components/infrastructure/tollHouse/Form/CreateTollHouse/TollHouseLocation";

function TabPanel(props) {
    const { children, value, index } = props;
    return (
        <div role="tabpanel" hidden={value !== index}>
            {value === index && <Box>{children}</Box>}
        </div>
    );
}

const validationSchema = object({
    name: string().required("وارد کردن نام راهدارخانه الزامیست!"),
    status: string().required("وارد کردن وضعیت الزامیست!"),
    type: string().required("وارد کردن نوع الزامیست!"),
    phone: string().required("وارد کردن تلفن راهدارخانه الزامیست!"),
    team_num: string().required("وارد کردن تعداد اکیپ الزامیست!"),
    staff_num: string().required("وارد کردن تعداد پرسنل الزامیست!"),
    responsible_name: string().required("وارد کردن نام مسئول الزامیست!"),
    responsible_mobile: string()
        .required("وارد کردن تلفن مسئول الزامیست!")
        .matches(/^09\d{9}$/, "شماره تلفن مسئول باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
    successor_name: string().required("وارد کردن نام جانشین الزامیست!"),
    successor_mobile: string()
        .required("وارد کردن تلفن جانشین الزامیست!")
        .matches(/^09\d{9}$/, "شماره تلفن جانشین باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
    province_id: number().required("وارد کردن استان الزامیست!"),
    city_id: number().required("وارد کردن شهرستان الزامیست!"),
    machines_light: string().required("وارد کردن ماشین آلات سبک الزامیست!"),
    machines_sheavy: string().required("وارد کردن ماشین آلات نیمه سنگین الزامیست!"),
    machines_heavy: string().required("وارد کردن ماشین آلات سنگین الزامیست!"),
    overview_files_1: mixed().nullable().required("لطفا نمای کلی از راهداری را بارگذاری کنید!"),
    overview_files_2: mixed().nullable().required("لطفا آشیانه ماشین آلات را بارگذاری کنید!"),
    overview_files_3: mixed().nullable().required("لطفا انباری شن و ماسه را بارگذاری کنید!"),
    overview_files_4: mixed().nullable().required("لطفا محیط کاری را بارگذاری کنید!"),
    overview_files_5: mixed().nullable().required("لطفا سایر تصاویر را بارگذاری کنید!"),
    start_point: mixed()
        .test("start-point-required", "لطفاً محل پروژه را مشخص کنید!", function (value) {
            return !!value;
        })
        .required("لطفاً محل پروژه را مشخص کنید!"),
});
const CreateTollHouseContent = ({ setOpen, SubmitCreateTollHouse, defaultValues }) => {
    const [tabState, setTabState] = useState(0);
    const handleClose = () => {
        setOpen(false);
    };

    const handleChangeTab = (event, newValue) => {
        setTabState(newValue);
    };
    const handleNext = async () => {
        let fieldsToValidate = [];
        if (tabState === 0) {
            fieldsToValidate = [
                "name",
                "province_id",
                "city_id",
                "status",
                "type",
                "phone",
                "team_num",
                "staff_num",
                "responsible_name",
                "responsible_mobile",
                "successor_name",
                "successor_mobile",
            ];
        } else if (tabState === 1) {
            fieldsToValidate = [
                "machines_light",
                "machines_sheavy",
                "machines_heavy",
                "overview_files_1",
                "overview_files_2",
                "overview_files_3",
                "overview_files_4",
                "overview_files_5",
            ];
        } else if (tabState === 2) {
            fieldsToValidate = ["start_point"];
        }
        const isValid = await trigger(fieldsToValidate);
        if (isValid) {
            setTabState(tabState + 1);
        }
    };
    const handlePrev = () => {
        if (tabState === 0) {
            handleClose();
        } else {
            setTabState(tabState - 1);
        }
    };
    const {
        control,
        handleSubmit,
        trigger,
        setValue,
        formState: { isSubmitting, errors },
    } = useForm({
        defaultValues,
        resolver: yupResolver(validationSchema),
        mode: "onBlur",
    });
    const onSubmitBase = async (data) => {
        await SubmitCreateTollHouse(data);
    };
    return (
        <StyledForm onSubmit={handleSubmit(onSubmitBase)}>
            <Tabs
                allowScrollButtonsMobile
                value={tabState}
                onChange={handleChangeTab}
                variant={"fullWidth"}
                sx={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    width: "100%",
                    backgroundColor: "#efefef",
                }}
            >
                <Tab icon={<OtherHousesIcon />} label="اطلاعات راهدارخانه" />
                <Tab disabled={tabState === 0} icon={<LocalShippingIcon />} label="ماشین آلات" />
                <Tab disabled={tabState === 0 || tabState === 1} icon={<EditLocationAltIcon />} label="موقعیت" />
            </Tabs>
            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
                <Box sx={{ flex: 1 }}>
                    <TabPanel value={tabState} index={0}>
                        <TollHouseInfo control={control} />
                    </TabPanel>
                    <TabPanel value={tabState} index={1}>
                        <MachineInfo control={control} />
                    </TabPanel>
                    <TabPanel value={tabState} index={2}>
                        <TollHouseLocation control={control} setValue={setValue} errors={errors} />
                    </TabPanel>
                </Box>
            </DialogContent>
            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
                <Button
                    onClick={handlePrev}
                    variant="outlined"
                    color="secondary"
                    size="large"
                    startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
                >
                    {tabState === 0 ? "بستن" : "مرحله قبل"}
                </Button>
                {tabState !== 2 && (
                    <Button
                        onClick={handleNext}
                        key={"handleNext"}
                        variant="contained"
                        size="large"
                        endIcon={<KeyboardDoubleArrowLeftIcon />}
                    >
                        مرحله بعد
                    </Button>
                )}
                {tabState === 2 && (
                    <Button
                        variant="contained"
                        size="large"
                        disabled={isSubmitting}
                        type={"submit"}
                        endIcon={<BeenhereIcon />}
                    >
                        {isSubmitting ? "در حال ثبت راهدارخانه" : "ثبت راهدارخانه"}
                    </Button>
                )}
            </DialogActions>
        </StyledForm>
    );
};
export default CreateTollHouseContent;