"use client";
import { getLogoutApi } from "@/api/user";
import { useRouter } from "@/i18n";
import { useSearchStore } from "@/stores/useSearchStore";
import { useUserInfoStore } from "@/stores/useUserInfoStore";
import { useWalletStore } from "@/stores/useWalletStore";
import { CenterPopup } from "antd-mobile";
import Cookies from "js-cookie";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, useState } from "react";
import "./style.scss";

/**
 * @description 底部组件
 */
export interface ItemComProps {
    type?: string;
    callbackFun?: (params: any) => void;
}

const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
    const t = useTranslations("ProfilePage");
    const restGlobal = useUserInfoStore((state) => state.reset);
    const resetSearch = useSearchStore((state) => state.reset);
    const restWalletStore = useWalletStore((state) => state.reset);

    // const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
    const [visible, setVisible] = useState(false);
    const logoutRequest = async () => {
        let res = await getLogoutApi();
        if (res.code == 200) {
            restGlobal();
            resetSearch();
            restWalletStore();
            localStorage.clear();
            sessionStorage.clear();
            Cookies.remove("Token");
            router.replace("/login");
        }
    };

    const router = useRouter();
    const goPage = (path = "/") => {
        router.push(path);
    };

    return (
        <>
            {/* {
                token ? <span className="logOut" onClick={onOpen}>{t('Sair')}</span> : (
                    <span className="logOut" onClick={() => goPage('/login')}>{t('Login')}</span>
                )
            } */}

            {
                <span className="logOut" onClick={() => setVisible(true)}>
                    {t("Sair")}
                </span>
            }

            <CenterPopup
                visible={visible}
                getContainer={() => document.getElementById("app")!}
                onMaskClick={() => {
                    setVisible(false);
                }}
            >
                <div className={"body1-box"}>
                    <p className="modal-p-box">{t("Deseja")}</p>
                    <div className="footer1-box">
                        <span className="modal-span-box" onClick={() => setVisible(false)}>
                            {t("Cancelar")}
                        </span>
                        <span className="modal-span-box active" onClick={logoutRequest}>
                            {t("Continuar")}
                        </span>
                    </div>
                </div>
            </CenterPopup>
        </>
    );
};

export default ModalCom;
