import React, { useState } from "react";
import { useForm } from "react-hook-form";

import DateRangePicker from "../DateRangePicker";
import Input from "../AnimatedInput/Input";
import CustomSelectBox from "../CustomSelectBox";

const FormInput = ({ items }) => {
  const { register, getValues } = useForm();
  const [selectedInput, setSelectedInput] = useState(false);

  return (
    <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
        <Input
          register={register("firstName")}
          // defaultValue={info?.firstName}
          label="نام "
          type="text"
          borderClassname={`border-transparent `}
          className={``}
          // borderClassname={` ${
          //   selectedInput === true ? "border-[#2483E1]" : "border-[#E0E0E0]"
          // }`}
          // onClick={() => setSelectedInput(true)}
        />
        <Input
          register={register("lastName")}
          label="نام خانوادگی"
          type="text"
          borderClassname={`border-transparent `}
          className={``}
        />
        <Input
          register={register("birthYear")}
          label="تاریخ تولد"
          type="number"
          borderClassname={`border-transparent `}
          className={``}
        />
        <CustomSelectBox />
        <Input
          register={register("gender")}
          label="جنسیت"
          type="number"
          borderClassname={`border-transparent `}
          className={``}
        />
      </div>
      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
        <Input
          register={register("mobileNumber")}
          label="شماره تماس"
          type="number"
          borderClassname={`border-transparent `}
          className={``}
        />
        <Input
          register={register("job")}
          label="شغل"
          type="text"
          borderClassname={`border-transparent `}
          className={``}
        />
        <CustomSelectBox options={items} />
        <Input
          register={register("foundus")}
          label="نحوه آشنایی با موکب"
          type="text"
          borderClassname={`border-transparent `}
          className={``}
        />
        <Input
          register={register("idCard")}
          label="کد ملی"
          type="number"
          borderClassname={`border-transparent `}
          className={``}
        />
      </div>
      <div className="flex-grow flex-1 flex flex-col  px-4">
        <Input
          register={register("lastName")}
          label="تاریخ ورود"
          type="text"
          borderClassname={`border-transparent `}
          className={``}
        />
        <DateRangePicker />
      </div>
    </div>
  );
};

export default FormInput;

FormInput.defaultProps = {
  items: [
    {
      title: "mahdi",
    },
    {
      title: "mahdi",
    },
    {
      title: "mahdi",
    },
  ],
};