import { useMemo, useState } from "react"
import styles from "./styles.module.scss"
import ProfileBlock from "../../components/ProfileBlock"
import ProfileInformation from "../../components/ProfileInformation"
import Billing from "../../components/Billing"
import LogOut from "../../components/LogOut"
import routes from "@/routes"
import { useAuth } from "@/auth"
import { useNavigate } from "react-router-dom"
import Modal from "@/components/Modal"
import Title from "@/components/Title"
import { useTranslations } from "@/hooks/translations"
import { ELocalesPlacement } from "@/locales"

function ProfilePage() {
    const { translate } = useTranslations(ELocalesPlacement.Profile);
    const { logout } = useAuth();
    const navigate = useNavigate();
    const [logoutModal, setLogoutModal] = useState(false);

    const handleLogout = () => {
        localStorage.removeItem("palmistry.firstUnpassedStep");
        navigate(routes.client.compatibilityV2Gender());
        logout();
    };

    const handleLogoutModal = () => {
        setLogoutModal(true);
    };

    const handleBilling = () => {
        navigate(routes.client.profileSubscriptions());
    };

    const profileBlocks = useMemo(() => [
        {
            title: translate("/profile.profile_information.title"),
            description: translate("/profile.profile_information.description"),
            children: <ProfileInformation />
        },
        // {
        //     title: "Access code",
        //     description: "Your account is protected by securely generated access code."
        // },
        {
            title: translate("/profile.billing.title"),
            description: translate("/profile.billing.description"),
            children: <Billing onBilling={handleBilling} />
        },
        // {
        //     title: "Delete Account",
        //     description: "Once your account is deleted, its resources and data will be permanently deleted. Your subscription will be active until cancelation in the Billing block above. Before deleting your account, please download any data or information you wish to retain."
        // },
        {
            title: translate("/profile.log_out.title"),
            children: <LogOut onLogout={handleLogoutModal} />
        }
    ], [translate])

    return (
        <div className={styles.container}>
            {profileBlocks.map((block, index) => (
                <div key={block.title} className={styles.block}>
                    <ProfileBlock {...block}>
                        {block.children}
                    </ProfileBlock>
                    {index !== profileBlocks.length - 1 && <hr />}
                </div>
            ))}
            {logoutModal && <Modal
                isCloseButtonVisible={false}
                open={!!logoutModal}
                onClose={() => setLogoutModal(false)}
                className={styles.modal}
                containerClassName={styles["modal-container"]}
            >
                <Title variant="h4" className={styles["modal-title"]}>
                    {translate("/profile.log_out.modal.title")}
                </Title>
                <p className={styles["modal-description"]}>
                    {translate("/profile.log_out.modal.description")}
                </p>
                <div className={styles["modal-answers"]}>
                    <div className={styles["modal-answer"]} onClick={handleLogout}>
                        <p className={styles["modal-answer-text"]}>
                            {translate("/profile.log_out.modal.log_out_button")}
                        </p>
                    </div>
                    <div className={styles["modal-answer"]} onClick={() => setLogoutModal(false)}>
                        <p className={styles["modal-answer-text"]}>
                            {translate("/profile.log_out.modal.stay_button")}
                        </p>
                    </div>
                </div>
            </Modal>}
        </div>
    )
}

export default ProfilePage