"use client";
import AppButton from "@/components/ui/button";
import { FormItem, FormWrapper } from "@/components/ui/form";
import AppInput from "@/components/ui/input";
import { SubscriptionPlan } from "@/types/subscriptionsPlan";
import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl";
import React from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import AppSelect from "@/components/ui/select";

type SubscriptionFormProps = {
  handleSubmit?: (values: any) => void;
  handleCloseModal?: () => void;
  subscriptionDetail?: SubscriptionPlan;
  isLoading?: boolean;
};

const SubscriptionForm = ({
  handleSubmit,
  handleCloseModal,
  subscriptionDetail,
  isLoading,
}: SubscriptionFormProps) => {
  const t = useTranslations("Form");

  const formSchema = z.object({
    name: z
      .string()
      .trim()
      .min(1, { message: t("validate.required", { length: 1 }) })
      .max(64, { message: t("validate.max_length", { length: 64 }) })
      .refine((val) => !val.startsWith(" "), {
        message: t("validate.required"),
      })
      .refine(
        (val) => /^[A-Za-z0-9\s!@#$%^&*()\-_=+\[\];:'",.?/~`|\\]+$/.test(val),
        {
          message: t("validate.name_special_characters_not_allowed"),
        },
      ),

    description: z
      .string()
      .trim()
      .min(1, { message: t("validate.required", { length: 1 }) })
      .max(255, { message: t("validate.max_length", { length: 255 }) })
      .refine((val) => !val.startsWith(" "), {
        message: t("validate.required"),
      })
      .refine(
        (val) => /^[A-Za-z0-9\s!@#$%^&*()\-_=+\[\];:'",.?/~`|\\]+$/.test(val),
        {
          message: t("validate.name_special_characters_not_allowed"),
        },
      ),
    subscriptionType: z
      .string()
      .min(1, { message: t("validate.required", { length: 1 }) }),
  });

  type SubscriptionFormSchema = z.infer<typeof formSchema>;

  const subscriptionForm = useForm<SubscriptionFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      description: "",
      subscriptionType: "",
    },
    values: {
      name: subscriptionDetail?.name ?? "",
      description: subscriptionDetail?.description ?? "",
      subscriptionType: subscriptionDetail?.subscriptionType ?? "",
    },
  });

  async function onSubmit(values: SubscriptionFormSchema) {
    if (handleSubmit) {
      handleSubmit(values);
    }
  }

  const generateTypeOptions = () => {
    return [
      { value: "MONTH", label: t("month") },
      { value: "YEAR", label: t("year") },
    ];
  };

  return (
    <FormWrapper<SubscriptionFormSchema>
      form={subscriptionForm}
      onSubmit={onSubmit}
      layout="vertical"
      className="space-y-4"
    >
      <FormItem name="name" label={t("subscription_name")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            value={value}
            {...field}
            placeholder={t("subscription_name_placeholder")}
          />
        )}
      </FormItem>

      <FormItem name="description" label={t("description")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            value={value}
            {...field}
            placeholder={t("description_placeholder")}
          />
        )}
      </FormItem>
      <FormItem name="subscriptionType" label={t("subscription_type")}>
        {({ value, ref, ...field }) => (
          <>
            <AppSelect
              ref={ref}
              value={value}
              options={generateTypeOptions()}
              placeholder={"Select subscription type"}
              {...field}
            />
          </>
        )}
      </FormItem>

      <div className="flex justify-end items-center gap-2">
        <AppButton
          type="default"
          loading={isLoading}
          onClick={handleCloseModal}
          className="w-fit"
        >
          {t("button.cancel")}
        </AppButton>
        <AppButton
          type="primary"
          htmlType="submit"
          loading={isLoading}
          className="w-fit"
        >
          {t("button.save")}
        </AppButton>
      </div>
    </FormWrapper>
  );
};

export default SubscriptionForm;