import { Modal } from "antd";
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import CheckList from "../../assets/icons/check_list.svg";
import Coupon from "../../assets/icons/coupon.svg";
import Customer from "../../assets/icons/customer-care.svg";
import FairTrade from "../../assets/icons/fair_trade.svg";
import Globe from "../../assets/icons/globe.svg";
import Group from "../../assets/icons/group.svg";
import HandBag from "../../assets/icons/handbag.svg";
import Heart from "../../assets/icons/heart.svg";
import Location from "../../assets/icons/location.svg";
import LogOut from "../../assets/icons/log_out.svg";
import Wallet from "../../assets/icons/wallet.svg";
import AvatarDefault from "../../assets/images/avatar_default.png";
import Footer from "../../components/Footer";
import {
  ChatAppBar,
  IconBell3,
  IconCartFooter,
  IconChevronRight,
} from "../../components/Icon";
import SvgIcon from "../../components/common/Icon";
import { useAccountStore } from "../../store/accountStore";
import { useAppStore } from "../../store/appStore";
import { useAuthStore } from "../../store/authStore";
import { alerts } from "../../utils/alerts";
import ActionItem from "./ActionItem";
import { useUserStore } from "../../store/userStore";
import IconWallet from "../../components/Icon/IconWallet";
import IconBox from "../../components/Icon/IconBox";
import IconStarCircle from "../../components/Icon/IconStarCircle";
import IconTruck from "../../components/Icon/IconTruck";

const Account: React.FunctionComponent = () => {
  const navigate = useNavigate();
  const authStore = useAuthStore((state) => state);
  const accountStore = useAccountStore((state) => state);
  const { avatar_image, name } = accountStore.accountInfo;
  const { appTheme } = useAppStore((state) => state);
  const { badges, resetUserStore } = useUserStore((state) => state);
  const { color_main_1 } = appTheme;

  const profile = JSON.parse(localStorage.getItem("profile"));
  const token = JSON.parse(localStorage.getItem("token"));

  const [openModalLogOut, setOpenModalLogOut] = useState(false);

  const ActionList = [
    // {
    //   id: 1,
    //   icon: <SvgIcon src={FairTrade} width="24" color="#B83869" />,
    //   actionName: "Đăng ký CTV",
    //   detail: "",
    //   handleClick: () => {},
    // },
    {
      id: 2,
      icon: <SvgIcon src={Wallet} width="24" color="#4A5396" />,
      actionName: "Xu tích lũy",
      detail: "0 Xu",
      handleClick: () => {
        navigate("/coins");
      },
    },
    {
      id: 3,
      icon: <SvgIcon src={HandBag} width="24" color="#4A5396" />,
      actionName: "Mua lại",
      detail: "",
      handleClick: () => {
        navigate("/purchased-products");
      },
    },
    {
      id: 4,
      icon: <SvgIcon src={Coupon} width="24" color="#4A5396" />,
      actionName: "Ví voucher",
      detail: "",
      handleClick: () => navigate("/voucher-wallet"),
    },
    {
      id: 5,
      icon: <SvgIcon src={Heart} width="24" color="#4A5396" />,
      actionName: "Đã thích",
      detail: "",
      handleClick: () => {
        navigate("/favorites");
      },
    },
    {
      id: 6,
      icon: <SvgIcon src={Location} width="24" color="#4A5396" />,
      actionName: "Địa chỉ của tôi",
      detail: "",
      handleClick: () => navigate("/my-address"),
    },
    // {
    //   id: 7,
    //   icon: <SvgIcon src={Customer} width="24" color="#B83869" />,
    //   actionName: "Liên hệ",
    //   detail: "",
    //   handleClick: () => {},
    // },
    // {
    //   id: 8,
    //   icon: <SvgIcon src={Globe} width="24" color="#B83869" />,
    //   actionName: "Website",
    //   detail: "",
    //   handleClick: () => {},
    // },
    {
      id: 9,
      icon: <SvgIcon src={LogOut} width="24" color="#B83869" />,
      actionName: "Đăng xuất",
      detail: "",
      handleClick: () => setOpenModalLogOut(true),
    },
  ];
  const StatusOrderList = [
    {
      id: "orders_waitting_for_progressing",
      title: "Chờ xác nhận",
      icon: <IconWallet className="w-6 h-6"></IconWallet>,
      field_by: "order_status_code",
      field_by_value: "WAITING_FOR_PROGRESSING",
    },
    {
      id: "orders_packing",
      title: "Chờ lấy hàng",
      icon: <IconBox className="w-6 h-6"></IconBox>,
      field_by: "order_status_code",
      field_by_value: "PACKING",
    },
    {
      id: "orders_shipping",
      title: "Đang giao",
      icon: <IconTruck className="w-6 h-6"></IconTruck>,
      field_by: "order_status_code",
      field_by_value: "SHIPPING",
    },
    {
      id: "orders_no_reviews",
      title: "Đánh giá",
      icon: <IconStarCircle className="w-6 h-6"></IconStarCircle>,
      field_by: "order_status_code",
      field_by_value: "COMPLETED",
    },
  ];

  const handleLogOut = () => {
    authStore.logOut(
      () => {
        alerts.success("Đã đăng xuất");
      },
      () => {
        alerts.error("Có lỗi xảy ra");
      }
    );
    accountStore.resetAccountStore();
    resetUserStore();
    setOpenModalLogOut(false);
  };

  return (
    <div className="mb-[100px]">
      <header
        className="bg-primary px-[8px] pt-[8px] pb-[16px]"
        style={{ backgroundColor: color_main_1 }}
      >
        <div className="flex justify-end gap-[16px] mb-[16px]">
          {/* <div className="w-[25px] text-white">
            <IconBell3 className="text-white w-[24px] h-[24px]" />
          </div>
          <div className="w-[25px]">
            <IconCartFooter className="text-white w-[24px] h-[24px]" />
          </div>
          <div className="w-[25px]">
            <ChatAppBar className="text-white" />
          </div> */}
        </div>
        <div className="flex justify-between items-center">
          <div className="flex gap-[12px] text-white items-center">
            <img
              className="w-[60px] h-[60px] object-cover rounded-full"
              src={profile ? avatar_image || AvatarDefault : AvatarDefault}
            />
            {profile && (
              <div className="flex flex-col justify-center gap-[8px] h-[60px]">
                <p className="font-semibold tracking-[0.5px]">{name}</p>
                <Link to="/edit-profile">
                  <button className="text-[#A0A0A0] text-[12px] bg-white px-[4px] rounded-[4px] flex items-center">
                    Thông tin tài khoản{" "}
                    <IconChevronRight className="text-[#ccc] w-[16px]" />
                  </button>
                </Link>
              </div>
            )}
          </div>
          {!profile && (
            <div className="gap-[8px] flex">
              <Link to="/login">
                <button
                  className="bg-white text-primary px-[10px] py-[6px] rounded-[3px]"
                  style={{ color: color_main_1 }}
                >
                  Đăng nhập
                </button>
              </Link>

              <Link to="/register">
                <button className="text-[#fff] border-[1px] border-solid border-[#fff] px-[10px] py-[5px] min-w-[93px] rounded-[3px]">
                  Đăng ký
                </button>
              </Link>
            </div>
          )}
        </div>

        <p className="bg-white text-red-600 px-[8px] text-[10px] rounded-full w-fit mt-[12px]">
          Cập nhật đầy đủ thông tin để hưởng các quyền lợi
        </p>
      </header>
      <main className="">
        <div
          className="flex justify-between outline-none items-center py-[14px] px-[8px] border-b-[1px] border-[#ccc]"
          onClick={() => navigate("/orders")}
        >
          <div className="flex gap-[10px] flex-1 items-center">
            <SvgIcon src={CheckList} width="24" color="#B83869" />
            <p className="">Đơn mua</p>
          </div>
          <div className="flex gap-[3px] flex-1 items-center justify-end">
            <p className="text-xs text-gray-500">Xem lịch sử mua hàng</p>
            <IconChevronRight className="text-[#000] w-[16px]" />
          </div>
        </div>
        {Object.entries(badges).length > 0 && token ? (
          <div className="flex justify-between outline-none items-center py-[14px] px-4 border-b-[1px] border-[#ccc]">
            {StatusOrderList.map((status) => (
              <div
                key={status.id}
                className="flex flex-col items-center justify-center gap-y-2 relative"
                onClick={() =>
                  navigate(
                    `/orders?field_by=${status.field_by}&field_by_value=${status.field_by_value}`
                  )
                }
              >
                {badges?.[status.id] > 0 ? (
                  <div
                    className={`absolute -top-2 ${
                      status.id === "orders_shipping"
                        ? "right-2"
                        : status.id === "orders_no_reviews"
                        ? "right-1"
                        : "right-3"
                    } w-4 h-4 bg-red-500 rounded-full flex justify-center items-center text-[10px] font-semibold text-[#fff]`}
                  >
                    {badges?.[status.id]}
                  </div>
                ) : null}

                <div
                  style={{
                    color: appTheme.color_main_1,
                  }}
                >
                  {status.icon}
                </div>
                <div className="text-xs text-gray-500">{status.title}</div>
              </div>
            ))}
          </div>
        ) : null}

        {/* <div
          className="flex justify-between outline-none items-center py-[14px] px-[8px] border-b-[1px] border-[#ccc]"
          onClick={() => {}}
        >
          <div className="flex gap-[10px] flex-1 items-center">
            <SvgIcon src={Group} width="24" color="#B83869" />

            <p className="">Mã giới thiệu</p>
          </div>
          <div className="flex gap-[3px] flex-1 items-center justify-end">
            <p className="text-[10px]"></p>
            <IconChevronRight className="text-[#000] w-[16px]" />
          </div>
        </div> */}
        {ActionList &&
          ActionList.length &&
          ActionList.map((item) => {
            const { id, handleClick, actionName } = item;
            if (actionName === "Đăng xuất" && !profile) return null;
            return <ActionItem key={id} action={item} onClick={handleClick} />;
          })}

        <Modal
          title="Xác nhận"
          open={openModalLogOut}
          onOk={handleLogOut}
          onCancel={() => setOpenModalLogOut(false)}
          okText="Đồng ý"
          cancelText="Hủy"
          centered
        >
          <p>Bạn có chắc chắn muốn đăng xuất không?</p>
        </Modal>
      </main>
      <Footer></Footer>
    </div>
  );
};

export default Account;