import { FileInput, Label } from "flowbite-react";
import { FC } from "react";
import { useFormContext } from "react-hook-form";
import {
  Datepicker,
  InputField,
  Radio,
  Select,
  Textarea,
} from "../forms/Inputs";
import { TSresellerSchema } from "../forms/schema/reseller";

type props = {
  reseller: TSresellerSchema;
};

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

  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div className="left">
        <div className="mt-1">
          <InputField
            labelText="Father's Name"
            name="father_name"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Mother's Name"
            name="mother_name"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Textarea
            labelText="Present Address"
            name="present_address"
            errors={errors}
            rows={2}
          />
        </div>
        <div className="mt-1">
          <Textarea
            labelText="Permanent Address"
            name="permanent_address"
            errors={errors}
            rows={2}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Social media account"
            name="social_media_account"
            placeholder="WhatsApp Number, skype-id"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="National ID"
            name="nid"
            placeholder="National id number"
            errors={errors}
          />
        </div>
      </div>
      <div className="right">
        <div className="mt-1">
          <InputField
            labelText="Email"
            name="email"
            placeholder="Email"
            errors={errors}
          />
        </div>
        <div className="mt-4">
          <Radio
            groupLabel="Gender"
            options={[
              { label: "Male", value: "male" },
              { label: "Female", value: "female" },
            ]}
            defaultValue={reseller?.gender ?? "male"}
            name="gender"
          />
        </div>
        <div className="mt-6">
          <Radio
            groupLabel="Marital status"
            options={[
              { label: "Marred", value: 1 },
              { label: "Unmarried", value: 0 },
            ]}
            defaultValue={reseller?.marital_status ?? 1}
            name="marital_status"
          />
        </div>
        <div className="mt-1">
          <Select
            defaultOption={"Select a blood group"}
            defaultValue={0}
            options={[
              { value: "A", label: "A" },
              { value: "B", label: "B" },
              { value: "O+", label: "O+" },
            ]}
            labelText="Blood Group"
            name="blood_group"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Datepicker
            name="date_of_birth"
            labelText="Date Of Birth"
            defaultDate={reseller?.date_of_birth}
          />
        </div>
        <div className="mt-1">
          <Datepicker
            name="join_date"
            labelText="Join Date"
            defaultDate={reseller?.join_date}
          />
        </div>
        <div className="mt-1">
          <div className="mb-2 block">
            <Label htmlFor="file-upload" value="Upload logo" />
          </div>
          <FileInput id="file-upload" />
        </div>
      </div>
    </div>
  );
};

export default AdvanceForm;