"use client";

import "../../style/globals.css";
import { Inter } from "next/font/google";
import "../../style/fontiran.css";
import NavBAr from "@comp/NavBar/NavBAr";
import "swiper/css";
import "swiper/css/navigation";
import "react-spring-bottom-sheet/dist/style.css";
import AppContext from "../../Contexts/AppContext";
import { useCallback, useEffect, useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Loading from "plugins/Loading/page";
import Chapar, { getToken } from "plugins/Chapar";

const inter = Inter({ subsets: ["latin"] });

// export const metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({ children }) {
  // BottomSheet
  const [BottomSheetCreateRoleOpen, setBottomSheetCreateRoleOpen] =
    useState(false);

  const [BottomSheetCreateEmployeesOpen, setBottomSheetCreateEmployeesOpen] =
    useState(false);

  const [BottomSheetCreateShiftsOpen, setBottomSheetCreateShiftsOpen] =
    useState(false);

  // BigPlus
  const [BigPlusOpen, setBigPlusOpen] = useState(false);
  const [BigPlusRotateIcon, setBigPlusRotateIcon] = useState(false);

  // login
  const [phoneNumber, setPhoneNumber] = useState("");
  const [verifyCode, setVerifyCode] = useState("");
  const [stepLogin, setStepLogin] = useState(0);
  const [tokenForStorage, setTokenForStorage] = useState(null);

  // loading
  const [loading, setLoading] = useState(false);

  //auth
  const [complexId, setComplexId] = useState(0);

  // createRole / role
  const [permissions, setPermissions] = useState(0);
  const [permissionsChoose, setPermissionsChoose] = useState([]);
  const [rolesData, setRolesData] = useState([]);
  const [roleData, setRoleData] = useState([]);
  const [goToEditRole, setGoToEditRole] = useState(false);
  const [idEditRole, setIdEditRole] = useState(null);

  // createUser/ user
  const [usersData, setUsersData] = useState([]);
  const [rolesChoose, setRolesChoose] = useState([]);
  const [userData, setUserData] = useState([]);
  const [goToEditUser, setGoToEditUser] = useState(false);
  const [idEditUser, setIdEditUser] = useState(null);

  const pathname = usePathname();
  const router = useRouter();
  const hiddenUrls = ["/login", "/"];
  const shouldRenderComponent = !hiddenUrls.includes(pathname);

  const closeBigPlusPage = () => {
    setTimeout(() => {
      setBigPlusOpen(false);
    }, 500);

    setBigPlusRotateIcon(false);
  };

  const ConfirmPhoneNumber = async (phoneNumber) => {
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/auth/verifycode?phoneNumber=${phoneNumber}`
      );
      setStepLogin(1);
      localStorage.removeItem("token");
    } catch ({ error, status }) {
      toast.error("  اطلاعات را صحیح وارد کنید ", {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };
  const LoginWhitVerifyCode = async () => {
    setLoading(true);

    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/auth/login/code`,
        {
          userName: phoneNumber,
          password: null,
          verifyCode,
        }
      );
      setLoading(false);
      localStorage.setItem("token", data.access_token);

      if (data.user.signUpStatus == 1) {
        setStepLogin(2);
      } else if (data.user.signUpStatus == 2) {
        toast.success(`  ${data.user.firstName}  جان خوش اومدی `, {
          position: "bottom-right",
          closeOnClick: true,
        });
        router.push("/home");
      }
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const SignUpLogin = async (body) => {
    setLoading(true);

    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/auth/signup/complex`,
        body,
        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      setLoading(false);

      if (data.user.signUpStatus == 2 || data.user.signUpStatus == 3) {
        toast.success(`  ${data.user.firstName}  جان خوش اومدی `, {
          position: "bottom-right",
          closeOnClick: true,
        });
        localStorage.setItem("token", data.access_token);

        router.push("/home");
      }
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const GetPermissions = async (body) => {
    setLoading(true);

    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/role/permission`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );

      console.log(data);
      setPermissions(data);
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const CreateRole = async (body) => {
    setLoading(true);
    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/role`,
        body,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      toast.success(`نقش ساخته شد`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setBottomSheetCreateRoleOpen(false);
      setLoading(false);
      GetRoles();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const UpdateRole = async (body) => {
    setLoading(true);
    try {
      const data = await Chapar.put(
        `${process.env.NEXT_PUBLIC_API_URL}/role`,
        body,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      toast.success(`نقش ویرایش شد`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setBottomSheetCreateRoleOpen(false);
      setLoading(false);
      GetRoles();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const GetRoles = async () => {
    setLoading(true);
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/role?page=0`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      console.log("GetRoles", data);

      setRolesData(data);
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const GetRole = async (id) => {
    setLoading(true);
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/role/${id}?page=0`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      console.log("GetRole  ", data);

      setRoleData(data);
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const DeleteRole = async (id) => {
    setLoading(true);
    try {
      const data = await Chapar.delete(
        `${process.env.NEXT_PUBLIC_API_URL}/role/${id}`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      setBottomSheetCreateRoleOpen(false);
      setLoading(false);

      GetRoles();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const CreateUser = async (body) => {
    setLoading(true);
    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/user`,
        body,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      toast.success(`کاربر ساخته شد`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setBottomSheetCreateEmployeesOpen(false);
      setLoading(false);
      GetUsers();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const UpdateUser = async (body) => {
    setLoading(true);
    try {
      const data = await Chapar.put(
        `${process.env.NEXT_PUBLIC_API_URL}/user`,
        body,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      toast.success(`کاربر ویرایش شد`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setBottomSheetCreateEmployeesOpen(false);
      setLoading(false);
      GetUsers();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const GetUsers = async () => {
    setLoading(true);
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/user?page=0`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );

      console.log("GetUsers", data);
      setUsersData(data);
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const GetUser = async (id) => {
    setLoading(true);
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/user/${id}`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      console.log("GetUsersalam", data);

      setUserData(data);
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };
  const DeleteUser = async (id) => {
    setLoading(true);
    try {
      const data = await Chapar.delete(
        `${process.env.NEXT_PUBLIC_API_URL}/user/${id}`,

        {
          headers: {
            Authorization: getToken(),
          },
        }
      );
      setBottomSheetCreateEmployeesOpen(false);
      setLoading(false);

      GetUsers();
    } catch ({ error, status }) {
      toast.error(`${error.response.data.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };

  // useEffect(() => {
  //   GetPermissions();
  // }, []);

  return (
    <AppContext.Provider
      value={{
        state: {
          BottomSheetCreateRoleOpen,
          BottomSheetCreateEmployeesOpen,
          BottomSheetCreateShiftsOpen,
          BigPlusOpen,
          BigPlusRotateIcon,
          loading,
          stepLogin,
          phoneNumber,
          verifyCode,
          tokenForStorage,
          complexId,
          permissions,
          permissionsChoose,
          rolesData,
          usersData,
          rolesChoose,
          goToEditRole,
          roleData,
          idEditRole,
          idEditUser,
          goToEditUser,
          userData,
        },
        setBottomSheetCreateRoleOpen,
        setBottomSheetCreateEmployeesOpen,
        setBottomSheetCreateShiftsOpen,
        setBigPlusOpen,
        setBigPlusRotateIcon,
        setLoading,
        ConfirmPhoneNumber,
        LoginWhitVerifyCode,
        setStepLogin,
        setPhoneNumber,
        setVerifyCode,
        SignUpLogin,
        setTokenForStorage,
        setComplexId,
        setPermissions,
        GetPermissions,
        setPermissionsChoose,
        CreateRole,
        setRolesData,
        GetRoles,
        CreateUser,
        GetUsers,
        setUsersData,
        setRolesChoose,
        setGoToEditRole,
        setRoleData,
        GetRole,
        setIdEditRole,
        DeleteRole,
        UpdateRole,
        setIdEditUser,
        setGoToEditUser,
        setUserData,
        DeleteUser,
        GetUser,
        UpdateUser,
      }}
    >
      <html lang="en">
        <body className={inter.className}>
          {children}
          {shouldRenderComponent && <NavBAr />}
          <ToastContainer position="bottom-right" closeOnClick={true} rtl />
          <Loading />
          {BigPlusOpen ? (
            <div className="fixed w-full  top-0 z-40">
              <motion.div
                animate={{ opacity: [0, 0.5, 1] }}
                transition={{ duration: 0.3 }}
              >
                <div className="bg-BigPlus h-screen">
                  <div className="flex justify-center">
                    <div className="bg-primary-200 w-[60px] h-[60px] rounded-full fixed bottom-[37px] ">
                      <div
                        onClick={() => {
                          closeBigPlusPage();
                        }}
                      >
                        <svg
                          width="25"
                          height="25"
                          viewBox="0 0 16 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className={`mx-auto mt-[16px] transition-all ${
                            BigPlusRotateIcon ? " rotate-45" : " rotate-0"
                          } `}
                        >
                          <path
                            d="M14 6H10V2C10 1.46957 9.78929 0.960859 9.41421 0.585786C9.03914 0.210714 8.53043 0 8 0C7.46957 0 6.96086 0.210714 6.58579 0.585786C6.21071 0.960859 6 1.46957 6 2L6.071 6H2C1.46957 6 0.960859 6.21071 0.585786 6.58579C0.210714 6.96086 0 7.46957 0 8C0 8.53043 0.210714 9.03914 0.585786 9.41421C0.960859 9.78929 1.46957 10 2 10L6.071 9.929L6 14C6 14.5304 6.21071 15.0391 6.58579 15.4142C6.96086 15.7893 7.46957 16 8 16C8.53043 16 9.03914 15.7893 9.41421 15.4142C9.78929 15.0391 10 14.5304 10 14V9.929L14 10C14.5304 10 15.0391 9.78929 15.4142 9.41421C15.7893 9.03914 16 8.53043 16 8C16 7.46957 15.7893 6.96086 15.4142 6.58579C15.0391 6.21071 14.5304 6 14 6Z"
                            fill="white"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-between  px-4 fixed bottom-[110px] w-full">
                    <Link href={"/dsdasd"}>
                      <div className="bg-secondaryDark-100 p-3 m-2 w-full rounded-full">
                        <p className="mb-0 text-white">افزودن خرید جدیـــــد</p>
                      </div>
                    </Link>

                    <Link href={"/dsdasd"}>
                      <div className="bg-secondaryDark-100 p-3 m-2 w-full rounded-full">
                        <p className="mb-0 text-white">افزودن وظیفه جدید</p>
                      </div>
                    </Link>
                  </div>
                </div>
              </motion.div>
            </div>
          ) : (
            ""
          )}
        </body>
      </html>
    </AppContext.Provider>
  );
}