"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Billing, LogOut, ProfileBlock, ProfileInformation } from "@/components/domains/profile"
import { Card, Modal, Typography } from "@/components/ui";
import { ROUTES } from "@/shared/constants/client-routes";

import styles from "./page.module.scss"

export default function ProfilePage() {
    const t = useTranslations('Profile');
    const router = useRouter();
    const [logoutModal, setLogoutModal] = useState(false);

    const handleLogout = () => {
        router.replace(ROUTES.home());
        // logout();
    };

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

    const handleBilling = () => {
        router.push(ROUTES.profileSubscriptions())
    }

    const profileBlocks = [
        {
            title: t("profile_information.title"),
            description: t("profile_information.description"),
            children: <ProfileInformation />
        },
        {
            title: t("billing.title"),
            description: t("billing.description"),
            children: <Billing onBilling={handleBilling} />
        },
        {
            title: t("log_out.title"),
            children: <LogOut onLogout={handleLogoutModal} />
        }
    ]

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