import { Label } from "flowbite-react";
import dynamic from "next/dynamic";
import { FC } from "react";
import { useFormContext } from "react-hook-form";
import UniqueField from "../common/unique-field";
import { InputField, Select, Textarea } from "../forms/Inputs";
import { TSresellerSchema } from "../forms/schema/reseller";
const DropdownList = dynamic(() => import("../common/Dropdown"));

type props = {
  reseller: TSresellerSchema;
  isEdit?: boolean;
};

const BasicForm: FC<props> = ({ reseller, isEdit = false }) => {
  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">
          <InputField
            labelText="Name"
            name="name"
            placeholder="Reseller Name"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <UniqueField
            name="username"
            labelText="Username"
            placeholder="Username"
            fieldId={reseller?.user?.uuid}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Password"
            name="password"
            placeholder="Reseller password"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Phone Number"
            name="phone"
            placeholder="Phone Number"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <div className={`mb-2 block `}>
            <Label htmlFor={"network"} value={"Network"} />
          </div>
          <DropdownList
            defaultItems={reseller?.network}
            name="network"
            idName="network_id"
            getLabel={(network: any) => network.name}
            isMulti={false}
          />
        </div>
        <div className="mt-1">
          <div className={`mb-2 block `}>
            <Label htmlFor={"package-template"} value={"Reseller Package"} />
          </div>
          <DropdownList
            defaultItems={reseller?.package}
            name="reseller_package"
            idName="package_id"
            placeholder="Reseller Package"
            getLabel={(package_template: any) => package_template.name}
          />
        </div>
      </div>
      <div className="right">
        <div className="mt-1">
          <div className={`mb-2 block `}>
            <Label htmlFor={"zone"} value={"Reseller zone"} />
          </div>
          <DropdownList
            defaultItems={reseller?.zone}
            name="zone"
            idName="zone_id"
            getLabel={(zone: any) => zone.name}
            isMulti={false}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Company Name"
            name="company"
            placeholder="Reseller Company Name"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Company Phone"
            name="company_phone"
            placeholder="Reseller Company Phone"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Textarea
            labelText="Company Address"
            name="company_address"
            placeholder="Reseller Company Address"
            errors={errors}
            rows={2}
          />
        </div>
        <div className="mt-2">
          <InputField
            labelText="Prefix"
            name="prefix"
            placeholder="ex: abcd"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Active" },
              { value: 0, label: "Inactive" },
            ]}
            labelText="Status"
            name="status"
            errors={errors}
          />
        </div>
      </div>
    </div>
  );
};

export default BasicForm;