import { FC, useState } from "react";
import { useFormContext } from "react-hook-form";
import { Checkbox, Datepicker, InputField, Select } from "../forms/Inputs";
import { TSclientSchema } from "../forms/schema/client";
import dynamic from "next/dynamic";

const FiberProduct = dynamic(() => import("./fiber-product"));

type props = {
  client: TSclientSchema;
  isEdit?: boolean
};

const ConnectivityForm: FC<props> = ({ client, isEdit = false }) => {
  const {
    formState: { errors },
  } = useFormContext();

  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div className="left">
        <div className="mt-1">
          <Select
            defaultValue={2}
            options={[
              { value: 1, label: "UTP" },
              { value: 2, label: "FIBER" },
            ]}
            labelText="Cable Type"
            name="cable_type"
            errors={errors}
          />
        </div>
        {!isEdit && (
          <>
            <div className="m-2">
              <div className="flex">
                <div className="mt-0.5 ml-1">
                  <FiberProduct />
                </div>
              </div>
            </div>

          </>

        )}
        <div className="mt-1">
          <InputField
            labelText="Require Cable"
            name="cable_length"
            placeholder="ex: 200"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Active" },
              { value: 0, label: "Inactive" },
            ]}
            labelText="Connection Mode"
            name="connection_mode"
            errors={errors}
          />
        </div>

      </div>
      <div className="right">
        <div className="mt-1">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Home" },
              { value: 2, label: "Corporate" },
              { value: 3, label: "Others" },
            ]}
            labelText="Client Type"
            name="type"
            errors={errors}
          />
        </div>
        <div className="mt-2">
          <Select
            defaultValue={1}
            options={[
              { value: 1, label: "Shared" },
              { value: 2, label: "Dedicated" },
            ]}
            labelText="Connectivity Type"
            name="connection_type"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <InputField
            labelText="MAC Address"
            name="mac_address"
            placeholder="MAC Address"
            errors={errors}
          />
        </div>
        <div className="mt-1">
          <Datepicker
            name="termination_date"
            labelText="Termination Date"
            defaultDate={client?.termination_date}
          />
        </div>
      </div>
    </div>
  );
};

export default ConnectivityForm;