import { CategoryOutlined, PersonOutlineOutlined } from "@mui/icons-material";

import { BsCart2 } from "react-icons/bs";
import { IoMdHeartEmpty } from "react-icons/io";
import { PiUser } from "react-icons/pi";
import { PiHandbag } from "react-icons/pi";

import style from "./bottomNavbar.module.css";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import Cart from "@/components/cart/cart";
import WishList from "@/components/wishlist/wishlist";
import { getCartTotalCount } from "@/store/cart";
import { getWishListTotalCount } from "@/store/wishlist";
import Account from "@/components/layouts/header/account";
import { customerApi } from "@/api/api";
import Loader from "@/components/utils/loader";
import Image from "next/image";
import { accountStoreActions } from "@/store/account";
import { useDispatch } from "react-redux";
import { useRouter } from "next/router";
import { wishlistStoreActions } from "@/store/wishlist";
import { cartStoreActions } from "@/store/cart";
import NextImage from "@/other/NextImage";

const BottomNavbar = () => {
  const [signInOpen, setSignInOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  const cartCount = useSelector(getCartTotalCount);
  const [favoriteOpen, setFavoriteOpen] = useState(false);
  const favoriteCount = useSelector(getWishListTotalCount);
  const account = useSelector((state) => state.accountStore);
  const dispatch = useDispatch();
  const cartLoader = useSelector((state) => state.cartStore.cartLoader);
  const wishlistLoader = useSelector(
    (state) => state.wishlistStore.wishlistLoader
  );
  const router = useRouter();

  const onOpenWishList = () => {
    if (account.loggedIn) setFavoriteOpen(true);
    else dispatch(accountStoreActions.openSignInUI({ signInUI: true }));
  };

  return (
    <>
      {cartOpen && (
        <Cart
          open={cartOpen}
          onClose={() => {
            setCartOpen((prev) => !prev);
          }}
        />
      )}
      {favoriteOpen && (
        <WishList
          open={favoriteOpen}
          onClose={() => {
            setFavoriteOpen((prev) => !prev);
          }}
        />
      )}
      <Account />
      <div className={style.bottom_navbar}>
        <div className={style.site_option}>
          <div
            className={style.site_option_section}
            onClick={() => router.push("/store")}
          >
            <PiHandbag />
            <div className={style.header_option_text}>
              <p className={style.option_sub}>Shop</p>
            </div>
          </div>
          <div
            className={style.site_option_section}
            onClick={() => onOpenWishList()}
          >
            {wishlistLoader ? (
              <Loader className={style.loader} />
            ) : (
              <>
                <div className={style.icon}>
                  <IoMdHeartEmpty />
                  <div
                    className={style.total_count}
                    data-count={favoriteCount}
                  ></div>
                </div>
                <div className={style.header_option_text}>
                  <p className={style.option_sub}>Wish List</p>
                </div>
              </>
            )}
          </div>
          <div
            className={style.site_option_section}
            onClick={() => setCartOpen(true)}
          >
            {cartLoader ? (
              <Loader className={style.loader} />
            ) : (
              <>
                <div className={style.icon}>
                  <BsCart2 />
                  <div
                    className={style.total_count}
                    data-count={cartCount}
                  ></div>
                </div>
                <div className={style.header_option_text}>
                  <p className={style.option_sub}>Cart</p>
                </div>
              </>
            )}
          </div>
          <div
            className={style.site_option_section}
            onClick={() => {
              !account.loggedIn
                ? dispatch(accountStoreActions.openSignInUI())
                : router.push("/account");
            }}
          >
            {account.img && account.loggedIn ? (
              <div className={style.profile_image}>
                <NextImage src={account.img} alt="No Image" fill />
              </div>
            ) : (
              <PiUser style={{ fontSize: 32 }} />
            )}
            <div className={style.header_option_text}>
              <p className={style.option_sub}>
                {account.loggedIn ? account.name : "Account"}
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default BottomNavbar;