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

type props = {
  client: TSclientSchema;
};
const BasicForm: FC<props> = ({ client }) => {
  const [networkId, setNetwork] = useState<string | number | undefined>(
    undefined
  );
  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="Client name"
            name="name"
            placeholder="Client Name"
            mandatory={true}
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            mandatory={true}
            labelText="Client ID / PPPoE ID"
            name="pppoe_username"
            placeholder="Ex: abc@017896354859"
            errors={errors}
          />
        </div>
        <div className="mt-3">
          <InputField
            mandatory={true}
            labelText="Password"
            name="pppoe_password"
            placeholder="password"
            errors={errors}
          />
        </div>
        <div className="mt-4">
          <InputField
            mandatory={true}
            labelText="Mobile Number"
            name="phone"
            placeholder="88"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="IP Address"
            name="ip_address"
            placeholder="ex: xxx.xxxx.xx.xx"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Discount"
            name="discount"
            placeholder="0.00"
            errors={errors}
          />
        </div>
        <div className="mt-3">
          <div className="flex items-center gap-2">
            <Radio
              groupLabel="Send Login SMS"
              name="login_sms_notification"
              options={[
                { label: "Yes", value: 1 },
                { label: "No", value: 0 },
              ]}
              defaultValue={client?.login_sms_notification ?? 1}
            />
          </div>
        </div>
        <div className="mt-1">
          <div className="flex items-center gap-4">
            <Select
              labelText="Payment deadline"
              defaultOption={"NO"}
              defaultValue={0}
              name="payment_deadline"
              options={Array.from(Array(31).keys()).map((item) => ({
                value: item + 1,
                label: item + 1 < 10 ? `0${item + 1}` : item + 1,
              }))}
            />
            {/* <Select
              labelText="Billing deadline"
              defaultOption={"NO"}
              defaultValue={0}
              name="billing_deadline"
              options={[
                { value: 1, label: "01" },
                { value: 2, label: "02" },
                { value: 3, label: "03" },
              ]}
            /> */}
          </div>
        </div>
        {/* <div className="mt-1">
          <div className="flex items-center gap-2">
            <InputField
              labelText="Flat"
              name="flat_number"
              placeholder="Flat"
            />
            <InputField
              labelText="house"
              name="house_number"
              placeholder="House Number"
            />
            <InputField
              labelText="Road"
              name="road_number"
              placeholder="Road Number"
            />
          </div>
        </div> */}
        <div className="mt-1">
          <Textarea
            rows={3}
            labelText="Current Address"
            name="current_address"
            placeholder="Address"
            errors={errors}
          />
        </div>
      </div>
      <div className="right">
        <div className="mt-2">
          <Label className="mb-2 block">
            Zone <span className="text-red-500">*</span>
          </Label>
          <DropdownList
            defaultItems={client?.zone}
            name="zone"
            idName="zone_id"
            getLabel={(zone: any) => zone.name}
            isMulti={false}
          />
        </div>
        <div className="mt-3">
          <Label className="mb-2 block">Sub Zone</Label>
          <DropdownList
            defaultItems={client?.sub_zone}
            name="sub_zone"
            idName="sub_zone_id"
            getLabel={(sub_zone: any) => sub_zone.name}
            isMulti={false}
          />
        </div>
        <div className="mt-3">
          <Label className="mb-2 block">
            Network
            <span className="text-red-500">*</span>
          </Label>
          <DropdownList
            defaultItems={client?.network}
            name="network"
            idName="network_id"
            getLabel={(network: any) => network.name}
            isMulti={false}
            onChange={(network) => setNetwork(network?.value)}
          />
        </div>
        <div className="mt-1">
          <div className="mb-2 mt-3">
            <Label>Network Packages (Mikrotik)</Label>
          </div>
          <DropdownList
            name="network_package"
            idName="package_id"
            getLabel={(mikrotik) => mikrotik.name}
            isMulti={false}
            isEnabled={false}
            depend_on={networkId}
            defaultItems={client?.package}
          />
        </div>
        <div className="mt-3">
          <Radio
            groupLabel="Billing Type"
            name="billing_type"
            options={[
              { label: "Auto", value: "auto" },
              { label: "Manual", value: "manual" },
              { label: "No bill", value: "no_bill" },
            ]}
            defaultValue={client?.billing_type ?? "manual"}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="Extra Bill"
            name="extra_bill"
            placeholder="0.00"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="National ID No"
            name="nid"
            placeholder="ex: NID Number"
            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 className="mt-1">
          <Textarea
            rows={3}
            labelText="Notes"
            name="note"
            placeholder="Optional"
            errors={errors}
          />
        </div>
      </div>
    </div>
  );
};

export default BasicForm;