"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Textarea } from "flowbite-react";
import { useRouter } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import { InputField, Select } from "../forms/Inputs";
import {
  TSsmsTemplateSchema,
  smsTemplateSchema,
} from "../forms/schema/sms-template";

type Props = {
  smsTemplate?: TSsmsTemplateSchema;
  isEdit?: boolean;
};

const SmsTemplateForm: FC<Props> = ({ smsTemplate, isEdit = false }) => {
  const queryClient = useQueryClient();
  const [message, setMessage] = useState("");
  const router = useRouter();
  const smsTemplateForm = useForm<TSsmsTemplateSchema>({
    resolver: zodResolver(smsTemplateSchema),
    mode: "onChange",
    defaultValues: smsTemplate as TSsmsTemplateSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    register,
    reset,
    setValue,
    getValues,
    formState: { errors },
  } = smsTemplateForm;

  const {
    mutate: submitSmsTemplate,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (smsTemplateData: TSsmsTemplateSchema) => {
      const api_url = isEdit
        ? `/api/sms-templates/${smsTemplate?.id}`
        : `/api/sms-templates`;
      const method = isEdit ? "put" : "post";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: smsTemplateData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ["sms-templates"] });
      router.push("/sms-templates");
      toast.success(
        `Sms Template ${isEdit ? "update" : "create"} successfully!`
      );
    },
    onError: (error: any) => {
      reset();
    },
  });
  const onSubmit = async (data: TSsmsTemplateSchema) => {
    console.log(data);
    submitSmsTemplate(data);
  };

  const onError = async (data: any) => {
    console.log(data);
  };
  const messageRef = useRef<HTMLInputElement>(null);
  const buildMessage = (data: string) => {
    const textArea = messageRef?.current;
    const position = textArea?.selectionStart ?? 0;
    console.log(data, position, message);
    const messages = [
      message.slice(0, position),
      data,
      message.slice(position),
    ].join(" ");
    setMessage(messages);
  };

  useEffect(() => {
    if (message) {
      setValue("message", message);
    }
  }, [message]);

  useEffect(() => {
    if (smsTemplate?.message) {
      setMessage(smsTemplate?.message);
    }
  }, [smsTemplate]);
  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      <PageHeader>
        <div className="flex justify-between px-2">
          <h1 className="font-semibold text-xl text-gray-900 mt-1">
            {isEdit ? "Edit SMS Template" : "Add New SMS Template"}
          </h1>
          <ActionButton href="/sms-templates" type="back" />
        </div>
      </PageHeader>
      <div className="p-5 bg-white">
        <FormProvider {...smsTemplateForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2 sm:grid-cols-2">
              <div>
                <div className="">
                  <InputField
                    labelText="Template Name"
                    name="name"
                    placeholder="Template Name"
                    errors={errors}
                  />
                </div>
                <div className="">
                  <Select
                    name="template_type"
                    labelText="Template Type"
                    defaultValue={"welcome"}
                    options={[
                      { label: "Welcome", value: "welcome" },
                      {
                        label: "Invoice Due",
                        value: "invoice_due",
                      },
                      // {
                      //   label: "Invoice Due Reseller",
                      //   value: "invoice_due_reseller",
                      // },
                      { label: "Payment Received", value: "payment_received" },
                      { label: "Wallet Payment", value: "wallet_payment" },
                      { label: "Client Activated", value: "client_activated" },
                      {
                        label: "Client Deactivated",
                        value: "client_deactivated",
                      },
                      {
                        label: "Invoice Due Reminder",
                        value: "invoice_due_reminder",
                      },
                      { label: "Custom", value: "custom" },
                    ]}
                  />
                </div>
                <div className="mt-1">
                  <div>
                    <label htmlFor="message" className="my-1 block">
                      Message
                    </label>
                  </div>
                  <Textarea
                    placeholder="Message"
                    rows={15}
                    ref={messageRef}
                    value={message}
                    onChange={(e: any) => setMessage(e?.target?.value)}
                    className="font-bold !text-xl"
                  />
                </div>
              </div>
              <div>
                <div className="mt-16 ml-5 grid gap-x-4 grid-cols-1 md:grid-cols-3 lg:grid-cols-3">
                  <Button
                    className="bg-gray-100 hover:!bg-gray-300 text-gray-900 mt-1"
                    onClick={() => buildMessage("{{client_id}}")}
                  >
                    {"{{client_id}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 hover:!bg-gray-300 text-gray-900 mt-1"
                    onClick={() => buildMessage("{{client_name}}")}
                  >
                    {"{{client_name}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 hover:!bg-gray-300 text-gray-900 mt-1"
                    onClick={() => buildMessage("{{total_due}}")}
                  >
                    {"{{total_due}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 hover:!bg-gray-300 text-gray-900 mt-1"
                    onClick={() => buildMessage("{{deadline}}")}
                  >
                    {"{{deadline}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 hover:!bg-gray-300 text-gray-900 mt-1"
                    onClick={() => buildMessage("{{this_month}}")}
                  >
                    {"{{this_month}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{password}}")}
                  >
                    {"{{password}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{package}}")}
                  >
                    {"{{package}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{deadline}}")}
                  >
                    {"{{deadline}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{day}}")}
                  >
                    {"{{day}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{company_name}}")}
                  >
                    {"{{company_name}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{company_phone}}")}
                  >
                    {"{{company_phone}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{invoice_type}}")}
                  >
                    {"{{invoice_type}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{invoice_discount}}")}
                  >
                    {"{{invoice_discount}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{payment_link}}")}
                  >
                    {"{{payment_link}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{payment_amount}}")}
                  >
                    {"{{payment_amount}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{payment_discount}}")}
                  >
                    {"{{payment_discount}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{payment_Id}}")}
                  >
                    {"{{payment_Id}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{fund}}")}
                  >
                    {"{{fund}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{reseller_name}}")}
                  >
                    {"{{reseller_name}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{reseller_name}}")}
                  >
                    {"{{opening_balance}}"}
                  </Button>
                  <Button
                    className="bg-gray-100 text-gray-900 mt-1 hover:!bg-gray-300"
                    onClick={() => buildMessage("{{reseller_name}}")}
                  >
                    {"{{closing_balance}}"}
                  </Button>
                </div>
              </div>
            </div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
        <ActionButton
          isLoading={isPending}
          type="submit"
          onClick={() => inputRef.current?.click()}
        />
      </div>
    </>
  );
};

export default SmsTemplateForm;