"use client";
import { usePermission } from "@/utils/auth/permission";
import getData, { putData } from "@/utils/fetch";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Card, List } from "flowbite-react";
import { useSession } from "next-auth/react";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { GrUpdate } from "react-icons/gr";
import { IoClose } from "react-icons/io5";
import { MdEditSquare } from "react-icons/md";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import Button from "../Button";
import UploadCompanyLogo from "../common/upload-company-logo";
import { InputField } from "../forms/Inputs";
import {
  companyProfileSchema,
  TScompanyProfileSchema,
} from "../forms/schema/company-profile";
import PageHeader from "../PageHeder";
import Spinner from "../spinner";

type props = {
  company_id: string;
};

const CompanyProfileView: FC<props> = ({ company_id }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isEdit, setEdit] = useState(false);
  const hasPermission = usePermission("company-settings.access");
  const queryClient = useQueryClient();
  const { data: session }: any = useSession();

  const companyForm = useForm<TScompanyProfileSchema>({
    resolver: zodResolver(companyProfileSchema),
    mode: "onChange",
    defaultValues: {},
  });
  const {
    handleSubmit,
    setValue,
    formState: { errors },
  } = companyForm;

  const getCompany = async () => {
    let profile_api = `/api/v1/company/profile/${company_id}`;
    if (session?.user?.reseller_id) {
      profile_api = `/api/v1/reseller/profile/${company_id}`;
    }
    const { data } = await getData(profile_api);
    // console.log(data);
    return data;
  };

  const { data: company, isLoading } = useQuery({
    queryKey: ["company"],
    queryFn: () => getCompany(),
    retry: 0,
  });

  let update_company_api = `/api/v1/company-profile/${company?.id}`;
  if (session?.user?.reseller_id) {
    update_company_api = `/api/v1/reseller-company-profile/${company_id}`;
  }
  const {
    mutate: updateCompany,
    isPending,
    isSuccess,
  } = useMutation<TScompanyProfileSchema, any>({
    mutationFn: async (companyData) => {
      console.log(update_company_api);
      return await putData(update_company_api, companyData);
    },
    onSuccess: (data) => {
      console.log(data);
      queryClient.invalidateQueries({ queryKey: ["company"] });
      setEdit(false);
      toast.success("Company update successfully!");
    },
    onError: () => {},
  });
  const onSubmit = (data: any) => {
    console.log("log", data);
    updateCompany(data);
  };

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

  useEffect(() => {
    setValue("name", company?.name);
    setValue("phone", company?.phone);
    setValue("email", company?.email);
    setValue("address", company?.address);
  }, [company]);

  return (
    <>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Company Profile</h2>
          {hasPermission && (
            <div className="flex">
              {!isEdit && usePermission("company-settings.edit") && (
                <div onClick={() => setEdit(true)}>
                  <Button className="mr-1" color="blue" size={"sm"}>
                    <MdEditSquare className="mr-1 mt-1" /> Edit
                  </Button>
                </div>
              )}
              {isEdit && (
                <div className="flex">
                  <Button
                    color="blue"
                    className="mr-2"
                    onClick={() => inputRef.current?.click()}
                    isProcessing={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 mt-1" /> Cancel
                  </Button>
                </div>
              )}
              <ActionButton type="back" href="/" className="ml-2" />
            </div>
          )}
        </div>
      </PageHeader>
      <div>
        <Card className="rounded-none dark:text-gray-200">
          <div className="grid grid-cols-1 mb-5 dark:text-gray-200">
            <div>
              {isLoading ? (
                <div className="flex justify-center">
                  <Spinner size="lg" />
                </div>
              ) : (
                <FormProvider {...companyForm}>
                  <form action="" onSubmit={handleSubmit(onSubmit, onError)}>
                    <List className="list-none mb-5">
                      <List.Item>
                        <List ordered nested className="list-none p-0">
                          <List.Item>
                            <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                              Status
                            </span>
                            <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                              :
                            </span>
                            <span
                              className={`${company?.status === "active" ? "text-green-600" : "text-red-600"} capitalize`}
                            >
                              {company?.status}
                            </span>
                          </List.Item>
                          <List.Item className={`flex ${isEdit ? "py-4" : ""}`}>
                            <div>
                              <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                                Company Name
                              </span>
                              <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                                :
                              </span>
                            </div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="name" />
                              </div>
                            ) : (
                              <span>{company?.name}</span>
                            )}
                          </List.Item>
                          <List.Item className={`flex ${isEdit ? "py-4" : ""}`}>
                            <div>
                              <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                                Phone Number
                              </span>
                              <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                                :
                              </span>
                            </div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="phone" />
                              </div>
                            ) : (
                              <span>{company?.phone}</span>
                            )}
                          </List.Item>
                          <List.Item className={`flex ${isEdit ? "py-4" : ""}`}>
                            <div>
                              <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                                Email
                              </span>
                              <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                                :
                              </span>
                            </div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="email" />
                              </div>
                            ) : (
                              <span>{company?.email}</span>
                            )}
                          </List.Item>
                          <List.Item className={`flex ${isEdit ? "py-4" : ""}`}>
                            <div>
                              <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                                Address
                              </span>
                              <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                                :
                              </span>
                            </div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="address" />
                              </div>
                            ) : (
                              <span>{company?.address}</span>
                            )}
                          </List.Item>
                        </List>
                      </List.Item>
                    </List>
                    <hr />
                    {usePermission("company-settings.edit") && (
                      <>
                        <div className="mt-5 pt-10">
                          <div className="flex mb-5">
                            <div className="w-36">
                              <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-36 inline-block">
                                Logo
                              </span>
                            </div>
                            <div className="flex">
                              <div>
                                <UploadCompanyLogo
                                  name="logo"
                                  company={company}
                                />
                              </div>
                            </div>
                          </div>
                          <div className="flex">
                            <div className="label dark:text-gray-200 text-md font-medium text-gray-800 w-36 inline-block">
                              Favicon
                            </div>
                            <div>
                              <UploadCompanyLogo
                                name="favicon"
                                company={company}
                              />
                            </div>
                          </div>
                        </div>
                      </>
                    )}
                    <input className="opacity-0" type="submit" ref={inputRef} />
                  </form>
                </FormProvider>
              )}
            </div>
          </div>
        </Card>
      </div>
    </>
  );
};

export default CompanyProfileView;