"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 [data, setData] = useState({
    province: state?.name || "",
    city: city?.name || "",
  });

  return (
    <>
      <ModalSearchCity
        open={open}
        state={state}
        selected={data}
        setOpen={setOpen}
        setSelected={setData}
      >
        <ButtonFilter setOpen={setOpen} selected={data} />
      </ModalSearchCity>
      <span className="black w-px bg-[#EFEFEF]"></span>
      <TextField
        variant="standard"
        onChange={(e) => setData({ ...data, search: e.target.value })}
        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: data.province,
            city: data.city,
            search: data.search,
          },
        }}
      >
        <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;