"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import Spinner from "@/components/spinner";
import { usePermission } from "@/utils/auth/permission";
import { postData } from "@/utils/fetch";
import { useQueryClient } from "@tanstack/react-query";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { FC, useState } from "react";
import { CiImport } from "react-icons/ci";

const SmsTemplateContent: FC = () => {
  const [loading, setLoading] = useState(false);
  const queryClient = useQueryClient();
  const { data: session }: any = useSession();
  const imports = async () => {
    setLoading(true);
    const { data } = await postData("/api/v1/sms-templates", {
      message: "import",
    });
    console.log(data);
    if (data?.message == "OK") {
      setLoading(false);
      queryClient.invalidateQueries({ queryKey: ["sms-templates"] });
    }
  };
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">SMS Templates</h2>
          {usePermission("sms-templates.create") && (
            <div>
              {session?.company?.domain === "localhost" ||
              session?.company?.domain === "app.isptik.com" ||
              session?.company?.domain === "softwarebd.net" ? (
                <Link href={"/sms-templates/create"}>
                  <ActionButton type="add">Add</ActionButton>
                </Link>
              ) : (
                <ActionButton type="any" onClick={() => imports()}>
                  {!loading ? (
                    <CiImport className="mt-1 mr-1 text-md font-bold" />
                  ) : (
                    <Spinner />
                  )}
                  <span>Import</span>
                </ActionButton>
              )}
            </div>
          )}
        </div>
      </PageHeader>
    </div>
  );
};

export default SmsTemplateContent;