import { Button, FormControl, FormHelperText, InputLabel, MenuItem, Select, Stack, TextField } from "@mui/material";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import SearchIcon from "@mui/icons-material/Search";
import React from "react";

const SearchItems = ({ setValue, itemsList, watch, errors, register, isSubmitting }) => {
    const disabledButton =
        (!!watch("start_date") && !!watch("end_date")) || !!watch("item_id") || !!watch("road_patrol_id");

    return (
        <Stack display={"flex"} sx={{ pb: 2 }} direction={"row"} spacing={1} alignItems={"center"}>
            <Stack sx={{ flex: 2 }}>
                <MuiDatePicker
                    name="start_date"
                    error={errors.start_date ? errors.start_date.message : null}
                    value={watch("start_date")}
                    placeholder={"از تاریخ"}
                    setFieldValue={setValue}
                    helperText={errors.start_date ? errors.start_date.message : null}
                />
            </Stack>
            <Stack sx={{ flex: 2 }}>
                <MuiDatePicker
                    name="end_date"
                    minDate={watch("start_date")}
                    error={errors.end_date ? errors.end_date.message : null}
                    value={watch("end_date")}
                    placeholder={"تا تاریخ"}
                    setFieldValue={setValue}
                    helperText={errors.end_date ? errors.end_date.message : null}
                />
            </Stack>
            <Stack sx={{ flex: 1.5 }}>
                <FormControl error={!!errors.item_id} size="small" fullWidth>
                    <InputLabel id="demo-error-label">آیتم فعالیت</InputLabel>
                    <Select
                        labelId="demo-error-label"
                        id="item_id"
                        name="item_id"
                        value={watch("item_id") || ""}
                        label="آیتم فعالیت"
                        onChange={(event) => setValue("item_id", event.target.value)}
                    >
                        <MenuItem value={""}>حذف</MenuItem>
                        {itemsList.map((item) => (
                            <MenuItem key={item.id} value={item.id}>
                                {item.name}
                            </MenuItem>
                        ))}
                    </Select>
                    {/*{errors.item_id ? (*/}
                    {/*    <FormHelperText>*/}
                    {/*        errors.item_id.message*/}
                    {/*    </FormHelperText>*/}
                    {/*) : null}*/}
                </FormControl>
            </Stack>
            <Stack sx={{ flex: 1 }}>
                <TextField
                    {...register("road_patrol_id")}
                    label="کد یکتا گشت"
                    error={!!errors.road_patrol_id}
                    value={watch("road_patrol_id")}
                    type="tel"
                    size={"small"}
                    inputProps={{
                        inputMode: "number",
                        min: 0,
                        pattern: "[0-9]*",
                    }}
                    onChange={(event) => {
                        if (!isNaN(event.target.value)) {
                            setValue("road_patrol_id", event.target.value);
                        } else {
                            setValue("road_patrol_id", watch("road_patrol_id"));
                        }
                    }}
                    helperText={errors.road_patrol_id ? errors.road_patrol_id.message : null}
                    variant="outlined"
                />
            </Stack>
            <Stack>
                <Button
                    variant="contained"
                    size="medium"
                    type={"submit"}
                    disabled={!disabledButton || isSubmitting}
                    endIcon={<SearchIcon />}
                >
                    {isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
                </Button>
            </Stack>
        </Stack>
    );
};
export default SearchItems;