import { Label } from "flowbite-react";
import { FC } from "react";
import { useFormContext } from "react-hook-form";
import DropdownList from "../common/Dropdown";
import { Datepicker, InputField, Select, Textarea } from "../forms/Inputs";
import { TSclientSchema } from "../forms/schema/client";

type props = {
  client: TSclientSchema;
};

const AdvanceForm: FC<props> = ({ client }) => {
  const {
    setValue,
    formState: { errors },
  } = useFormContext();

  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div className="left">
        <div className="mt-1">
          <Label className="mb-2 block">Upazila/Thana</Label>
          <DropdownList
            defaultItems={client?.upazila}
            name="upazila"
            idName="upazila_id"
            getLabel={(upazila: any) => `${upazila.name} ${upazila.bn_name}`}
            isMulti={false}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Father's Name"
            name="father_name"
            placeholder="Father name"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Email"
            name="email"
            placeholder="example@gmail.com"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Occupation"
            name="occupation"
            placeholder="occupation"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Textarea
            labelText="Permanent Address"
            name="permanent_address"
            placeholder="Address"
            errors={errors}
            rows={3}
          />
        </div>
      </div>
      <div className="right">
        <div className="mt-1">
          <InputField
            labelText="Alternative Phone-1"
            name="alternate_phone1"
            placeholder="Alternative Phone one"
            errors={errors}
          />
          <InputField
            labelText="Alternative Phone-2"
            name="alternate_phone2"
            placeholder="Alternative Phone two"
            errors={errors}
          />
        </div>
        {/* <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Agent one" },
              { value: 2, label: "Agent two" },
            ]}
            labelText="Agent"
            name="agent_id"
            errors={errors}
          />
        </div> */}
        <div className="mt-2">
          <InputField
            labelText="Signup Fee"
            name="signup_fee"
            placeholder="Ex:1500"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Cash" },
              { value: 2, label: "bKash" },
              { value: 2, label: "Cash for home" },
            ]}
            labelText="Payment Method (Fund)"
            name="fund"
            errors={errors}
          />
        </div>
        {/* <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "staff one" },
              { value: 2, label: "staff tow" },
              { value: 2, label: "staff three" },
            ]}
            labelText="Bill Man"
            name="biller_id"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Select
            defaultValue={2}
            options={[
              { value: 1, label: "Technician one" },
              { value: 2, label: "Technician two" },
              { value: 2, label: "Technician three" },
            ]}
            labelText="Technician"
            name="staff_id"
            errors={errors}
          />
        </div> */}
        <div className="mt-1">
          <Datepicker
            name="connection_date"
            defaultDate={client?.connection_date as string}
            labelText="Connection Date"
          />
        </div>
      </div>
    </div>
  );
};

export default AdvanceForm;