import { Grid, Stack, TextField } from "@mui/material";
import { Controller } from "react-hook-form";
import SelectBox from "@/core/components/SelectBox";
import useProvince from "@/lib/hooks/useProvince";
import PersianTextField from "@/core/components/PersianTextField";
import CityController from "./CityController";
import LogesticController from "./LogesticController";

const TollHouseInfo = ({ control }) => {
    const { provinces, loadingProvinces, errorProvinces } = useProvince();
    return (
        <Stack spacing={2}>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="name"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <PersianTextField
                                    value={value}
                                    variant="outlined"
                                    name="name"
                                    onChange={onChange}
                                    label="نام راهدارخانه"
                                    placeholder="نام راهدارخانه را وارد کنید"
                                    fullWidth
                                    size="small"
                                    error={error}
                                    helperText={error?.message}
                                    InputLabelProps={{ shrink: true }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="phone"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تلفن راهدارخانه"
                                    value={value}
                                    placeholder="تلفن راهدارخانه را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <LogesticController control={control} />
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="status"
                            control={control}
                            render={({ field, fieldState: { error } }) => {
                                return (
                                    <SelectBox
                                        value={field.value}
                                        label="وضعیت"
                                        selectors={[
                                            { id: 1, name: "فعال" },
                                            { id: 0, name: "غیر فعال" },
                                        ]}
                                        schema={{ name: "name", value: "id" }}
                                        error={error}
                                        onChange={field.onChange}
                                        helperText={error?.message}
                                        isLoading={false}
                                        errorEcured={false}
                                    />
                                );
                            }}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="type"
                            control={control}
                            render={({ field, fieldState: { error } }) => {
                                return (
                                    <SelectBox
                                        value={field.value}
                                        label="نوع"
                                        selectors={[
                                            { id: 1, name: "دائمی" },
                                            { id: 2, name: "موقت" },
                                            { id: 3, name: "فصلی" },
                                        ]}
                                        schema={{ name: "name", value: "id" }}
                                        error={error}
                                        onChange={field.onChange}
                                        helperText={error?.message}
                                        isLoading={false}
                                        errorEcured={false}
                                    />
                                );
                            }}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="team_num"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تعداد اکیپ"
                                    value={value}
                                    placeholder="تعداد اکیپ را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="staff_num"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تعداد پرسنل"
                                    value={value}
                                    placeholder="تعداد پرسنل را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="responsible_name"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <PersianTextField
                                    value={value}
                                    variant="outlined"
                                    name="responsible_name"
                                    onChange={onChange}
                                    label="نام مسئول"
                                    placeholder="نام مسئول را وارد کنید"
                                    fullWidth
                                    size="small"
                                    error={error}
                                    helperText={error?.message}
                                    InputLabelProps={{ shrink: true }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="responsible_mobile"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تلفن مسئول"
                                    value={value}
                                    placeholder="تلفن مسئول را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="successor_name"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <PersianTextField
                                    value={value}
                                    variant="outlined"
                                    name="responsible_name"
                                    onChange={onChange}
                                    label="نام جانشین"
                                    placeholder="نام جانشین را وارد کنید"
                                    fullWidth
                                    size="small"
                                    error={error}
                                    helperText={error?.message}
                                    InputLabelProps={{ shrink: true }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="successor_mobile"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تلفن جانشین"
                                    value={value}
                                    placeholder="تلفن جانشین را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
        </Stack>
    );
};
export default TollHouseInfo;