import { useState } from "react";
import { useFormContext } from "react-hook-form";
import { useBoolean } from "usehooks-ts";

import FormItem from "@/components/form/form-item";
import Card from "@/components/ui/card/card";
import { Checkbox } from "@/components/ui/checkbox/checkbox";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-button/radio-group";
import { useLocale } from "@/hooks/useLocale";

import CompanyBillingForm from "./company-billing-form";
import PersonBillingForm from "./person-billing-form";

export interface BillingInfoFormProps {
  prefix: string;
  open?: boolean;
  onChangeDiffrentBillingInfoValue?: (value: boolean) => void;
}

export interface IBillingInfoForm {
  billing: BillingType;
  name: string;
  surname: string;
  tc: string;
  email: string;
  country: {
    Id: number;
  };
  city: string;
  companyTitle: string;
  companyTaxOffice: string;
  taxNo: string;
  address: string;
}

type BillingType = "person" | "company" | "companyWithTaxNo";

const BillingInfoForm = (props: BillingInfoFormProps) => {
  const boolean = useBoolean(props?.open);
  const methods = useFormContext();
  const [billingTypeState, setBillingTypeState] = useState(
    "person" as BillingType,
  );
  const { t } = useLocale();
  return (
    <Card>
      <div>
        <FormItem name="billingInfoCompOpen">
          {({ field }) => (
            <Checkbox
              id={`${props.prefix}-check`}
              name={field.name}
              label={t("My billing information is different")}
              labelClassname="text-sm font-semibold"
              checked={field.value || boolean.value}
              onCheckedChange={(check) => {
                props.onChangeDiffrentBillingInfoValue?.(
                  Boolean(check.valueOf()),
                );
                boolean.setValue(Boolean(check.valueOf()));
                field.onChange(check.valueOf());
              }}
            />
          )}
        </FormItem>
      </div>

      {boolean.value && (
        <div>
          <p className="my-4 text-sm">
            {t(
              "When your reservation is completed, we will send you your invoice via e-mail, please make sure that you fill in the information below completely and correctly.",
            )}
          </p>
          <hr className="my-4" />
          <div className="mb-4 text-sm">
            <FormItem name={`${props.prefix}-billing-type`}>
              {({ field }) => (
                <RadioGroup
                  id={`${props.prefix}-billing-type`}
                  name={field.name}
                  className="gap-3"
                  value={field.value || billingTypeState}
                  onValueChange={(value) => {
                    setBillingTypeState(value.valueOf() as BillingType);
                    field.onChange(value.valueOf());
                  }}
                >
                  <RadioGroupItem
                    value="person"
                    label={t("Individual")}
                    labelTextSize="sm"
                    id={`${props.prefix}-billing-type-person`}
                  />
                  <RadioGroupItem
                    value="companyWithTaxNo"
                    label={t("Company")}
                    labelTextSize="sm"
                    id={`${props.prefix}-billing-type-company-tax`}
                  />
                  <RadioGroupItem
                    value="company"
                    label={t("Sole Proprietorship")}
                    labelTextSize="sm"
                    id={`${props.prefix}-billing-type-company`}
                  />
                </RadioGroup>
              )}
            </FormItem>
          </div>

          {(methods.watch(`${props.prefix}-billing-type`) ||
            billingTypeState) === "person" && (
            <PersonBillingForm prefix={props.prefix} />
          )}
          {["company", "companyWithTaxNo"].includes(
            methods.watch(`${props.prefix}-billing-type`) || billingTypeState,
          ) && (
            <CompanyBillingForm
              prefix={props.prefix}
              isWithTaxNo={
                (methods.getValues(`${props.prefix}-billing-type`) ||
                  billingTypeState) === "companyWithTaxNo"
              }
            />
          )}
        </div>
      )}
    </Card>
  );
};

export default BillingInfoForm;