"use client";
import { usePermission } from "@/utils/auth/permission";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Button, List, Spinner, Tabs } from "flowbite-react";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { GrMap, GrUpdate } from "react-icons/gr";
import { IoClose } from "react-icons/io5";
import { LuSchool } from "react-icons/lu";
import { MdEditSquare, MdSms } from "react-icons/md";
import PageHeader from "../PageHeder";
import Toasts from "../Toasts";
import { InputField, Select } from "../forms/Inputs";
import { TScompanySchema, companySchema } from "../forms/schema/company";

const SettingView: FC = () => {
  const [isEdit, setEdit] = useState(false);
  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);
  const companyForm = useForm<TScompanySchema>({
    resolver: zodResolver(companySchema),
    mode: "onChange",
    defaultValues: {},
  });
  const {
    handleSubmit,
    setValue,
    formState: { errors },
  } = companyForm;

  const getCompany = async () => {
    const { data } = await axios.get("/api/company");
    return data?.data;
  };

  const { data: company, isLoading } = useQuery({
    queryKey: ["company"],
    queryFn: () => getCompany(),
    retry: 0,
  });
  const {
    mutate: updateSettings,
    isPending,
    isSuccess,
  } = useMutation<TScompanySchema, any>({
    mutationFn: async (companyData) => {
      const { data } = await axios({
        method: "post",
        url: "/api/company",
        data: companyData,
      });
      return data.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["company"] });
      setEdit(false);
    },
    onError: () => {},
  });

  const onSubmit = (data: TScompanySchema) => {
    updateSettings(data);
    console.log(data);
  };

  const onError = (data: any) => {
    console.log("error", data);
  };

  useEffect(() => {
    if (company) {
      setValue("company", company.company);
      setValue("settings", company.settings);
    }
  }, [company]);

  return (
    <>
      <PageHeader>
        <div className="flex justify-between">
          <div>
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Settings
            </h1>
          </div>
          {usePermission("company-settings.edit") && (
            <div className="flex">
              {!isEdit && (
                <Button
                  className="mr-1"
                  color="blue"
                  onClick={() => setEdit(true)}
                  size={"sm"}
                >
                  <MdEditSquare className="mr-1" /> Edit
                </Button>
              )}
              {isEdit && (
                <div className="flex">
                  <Button
                    color="blue"
                    className="mr-2"
                    onClick={() => inputRef.current?.click()}
                    disabled={isPending}
                  >
                    <div className="flex">
                      <GrUpdate className="mt-1 mr-1 text-xs" />
                      <span>Update</span>
                    </div>
                  </Button>
                  <Button onClick={() => setEdit(false)} size={"sm"}>
                    <IoClose className="mr-1" /> Cancel
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
      </PageHeader>
      {isLoading && (
        <div className="text-center">
          <Spinner aria-label="Center-aligned spinner example" size="xl" />
        </div>
      )}
      {isSuccess && <Toasts message="Setting update successfully!" />}
      {company && (
        <div className="p-3 relative z-5">
          {isPending && (
            <div className="text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <Spinner
                aria-label="Center-aligned spinner example"
                className="mt-20"
                size="xl"
              />
            </div>
          )}
          <FormProvider {...companyForm}>
            <form action="" onSubmit={handleSubmit(onSubmit, onError)}>
              <Tabs aria-label="Tabs with icons" style="underline">
                <Tabs.Item
                  active
                  title="Company"
                  icon={LuSchool}
                  className="!outline-none !focus:ring-0 !border-transparent !focus:border-transparent !border-none"
                >
                  <List className="list-none pl-3 w-full">
                    <List.Item className="w-full">
                      <List ordered nested className="list-none p-0">
                        <List.Item>
                          <div className="flex">
                            <div>
                              <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                                Company Name
                              </span>
                              <span className="font-bold text-gray-900 mr-2">
                                :
                              </span>
                            </div>
                            <div>
                              {isEdit ? (
                                <div className="-mt-4 w-96">
                                  <InputField name="company.name" />
                                </div>
                              ) : (
                                <span>{company?.company?.name}</span>
                              )}
                            </div>
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Address
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField
                                  name="company.address"
                                  errors={errors}
                                />
                              </div>
                            ) : (
                              <span>{company?.company?.address}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Domain
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="company.domain" />
                              </div>
                            ) : (
                              <span>{company?.company?.domain}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Email
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="company.email" />
                              </div>
                            ) : (
                              <span>{company?.company?.email}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Phone
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="company.phone" />
                              </div>
                            ) : (
                              <span>{company?.company?.phone}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Status
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-2 w-96">
                                <Select
                                  defaultValue={"active"}
                                  options={[
                                    { value: "active", label: "Active" },
                                    { value: "inactive", label: "Inactive" },
                                  ]}
                                  name="company.status"
                                />
                              </div>
                            ) : (
                              <span
                                className={`capitalize ${
                                  company.company?.status === "active"
                                    ? "text-green-500"
                                    : "text-red-500"
                                }`}
                              >
                                {company?.company?.status}
                              </span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Package
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="company.package" />
                              </div>
                            ) : (
                              <span>{company?.company?.package}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item>
                          <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                            Favicon
                          </span>
                          <span className="font-bold text-gray-900 mr-2">
                            :
                          </span>
                          <span>{company?.company?.favicon}</span>
                        </List.Item>
                        <List.Item>
                          <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                            Logo
                          </span>
                          <span className="font-bold text-gray-900 mr-2">
                            :
                          </span>
                          {/* <Avatar img={company.company?.logo} size="md" /> */}
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
                <Tabs.Item title="SMS" icon={MdSms}>
                  <List className="list-none pl-3">
                    <List.Item>
                      <List ordered nested className="list-none p-0">
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              SMS api
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.sms_api" />
                              </div>
                            ) : (
                              <span>{company?.settings?.sms_api}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              SMS api password
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.sms_api_password" />
                              </div>
                            ) : (
                              <span>{company?.settings?.sms_api_password}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              SMS api user
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.sms_api_user" />
                              </div>
                            ) : (
                              <span>{company?.settings?.sms_api_user}</span>
                            )}
                          </div>
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
                <Tabs.Item title="Map" icon={GrMap}>
                  <List className="list-none pl-3">
                    <List.Item>
                      <List ordered nested className="list-none p-0">
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Google Map api
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.gmap_api" />
                              </div>
                            ) : (
                              <span>{company?.settings?.gmap_api}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Default Lat
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.lat" />
                              </div>
                            ) : (
                              <span>{company?.settings?.lat}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Default Lon
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.lon" />
                              </div>
                            ) : (
                              <span>{company?.settings?.lon}</span>
                            )}
                          </div>
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
              </Tabs>
              {isEdit && (
                <>
                  <div className="py-4">
                    <hr />
                  </div>
                  <div className="flex justify-end">
                    <Button type="submit" color="blue" disabled={isPending}>
                      {isPending && (
                        <Spinner
                          aria-label="Spinner button"
                          size="sm"
                          className="mr-1"
                        />
                      )}
                      <div className="flex">
                        <GrUpdate className="mt-1 mr-1 text-xs" />
                        <span>Update</span>
                      </div>
                    </Button>
                  </div>
                </>
              )}
              <input className="opacity-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </div>
      )}
    </>
  );
};

export default SettingView;