"use client"

import { useState } from "react";

import { Button, TextField } from "@mui/material";
import ModalSearchCity from "@/app/component/modalSearchCity";
import Search from "@/components/icons/Search";
import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
import Link from "next/link";
import SearchD from "@/components/icons/SearchD";

function Fields({ city, state }) {
    const [open, setOpen] = useState(false);
    const [selected, setSelected] = useState({
        province: state?.name || '',
        city: city?.name || '',
    });

    return (
        <>
            <ModalSearchCity
                open={open}
                state={state}
                setOpen={setOpen}
                selected={selected}
                setSelected={setSelected}
            >
                <ButtonFilter setOpen={setOpen} selected={selected} />
            </ModalSearchCity>
            <span className="black w-px bg-[#EFEFEF]"></span>
            <TextField
                variant="standard"
                InputProps={{
                    disableUnderline: true,
                }}
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    "& .MuiInput-root": {
                        padding: "0",
                        borderBottom: "none",
                    },
                    "& .MuiInputBase-input": {
                        color: "#6C757D",
                    },
                    "& .MuiInputBase-input": {
                        color: "#6C757D",
                        fontSize: {
                            xs: "10px !important",
                            sm: "12px !important",
                            md: "14px !important",
                            lg: "16px !important",
                        },
                    }
                }}
                placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
                dir="rtl"
                className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
            />
            <Link
                href={{
                    pathname: "/doctors",
                    query: {
                        province: selected.province,
                        city: selected.city,
                    },
                }}
            >
                <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
                    <div className="min-w-[20px] min-h-[20px]">
                        <Search />
                    </div>
                    <p>جستجو</p>
                </Button>
                <Button
                    className="!flex lg:!hidden !rounded-[4px] 
                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] 
                !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
                !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] 
                !gap-2.5 !p-2.5"
                >
                    <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
                        <SearchD />
                    </div>
                </Button>
            </Link>
        </>
    )
}

export default Fields