"use client";

import { useSessionStore } from "@core/Store/Sesion.Store";
import Link from "next/link";
import { useEffect, useState } from "react";

export enum SECURE_CONTENTS {
    PAYMENTS = "payments",
    WAP = "wap",
    ALL = "all",
}
export interface SecureByPlanProps {
    children: React.ReactNode;
    content: SECURE_CONTENTS;
    companyId?: string;
}

export default function SecureByPlan(props: SecureByPlanProps): React.ReactElement {
    const { content = SECURE_CONTENTS.ALL, children, companyId } = props;
    const SessionInfo = useSessionStore();
    const [visible, setVisible] = useState<boolean>(false);

    useEffect(() => {
        let subscription = SessionInfo.subscription;

        if (companyId && SessionInfo.organizationSubscriptions) {

            const orgSub = SessionInfo.organizationSubscriptions[companyId];
            if (orgSub) {
                subscription = orgSub;
            }
        }

        if (content === SECURE_CONTENTS.PAYMENTS) {
            setVisible(subscription.plan.payments);
        } else if (content === SECURE_CONTENTS.WAP) {
            setVisible(subscription.plan.wapNotifications);
        } else if (content === SECURE_CONTENTS.ALL) {
            setVisible(true);
        }
    }, [SessionInfo, companyId, content]);

    return (
        <>
            {visible && children}
            {!visible && (
                <div className="not-available-div-container">
                    <h2 style={{ color: "var(--wine-red)" }}>Módulo no disponible!</h2>
                    <img
                        src="/no-plan-access.png"
                        alt="Este módulo no está disponible en tu plan actual"
                    />
                    <p>
                        Este módulo no está disponible en tu plan actual. Por favor,{" "}
                        <Link href="/landing/pricing">actualiza tu Plan</Link>.
                    </p>
                </div>
            )}
        </>
    );
}
