import Title from "@/components/Title"
import styles from "./styles.module.scss"
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { images } from "@/components/CompatibilityV4/data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import useTimer from "@/hooks/palmistry/use-timer";
import { useEffect, useState } from "react";
import { copyToClipboard } from "@/services/data";
import Toast from "@/components/pages/ABDesign/v1/components/Toast";

interface IHeaderProps {
    classNameContainer?: string;
    onButtonClick: () => void;
}

function Header({
    classNameContainer = "",
    onButtonClick
}: IHeaderProps) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const authCode = useSelector(selectors.selectAuthCode);
    const timer = useTimer();
    const [isCopied, setIsCopied] = useState(false);

    const handleCopy = async () => {
        const isCopied = await copyToClipboard(authCode);
        setIsCopied(isCopied);
    };

    useEffect(() => {
        if (!isCopied) return;

        const timeout = setTimeout(() => {
            setIsCopied(false);
        }, 4000);

        return () => clearTimeout(timeout);
    }, [isCopied]);

    return (
        <div className={`${styles.container} ${classNameContainer}`}>
            <Title variant="h3" className={styles.title}>
                {translate("/try-app.header.title")}
            </Title>
            <div className={styles.buttons}>
                <div className={styles.copyCode} onClick={handleCopy} title={translate("/try-app.copy-code-title")}>
                    <img src={images("copy-icon.png")} alt="Copy code" />
                    <span className={styles.code}>{authCode}</span>
                </div>
                <div className={styles.downloadApp} onClick={onButtonClick}>
                    <span className={styles.timer}>{timer}</span>
                    <p className={styles.downloadAppDescription}>
                        {translate("/try-app.header.get-prediction-in-app", {
                            br: <br />
                        })}
                    </p>
                </div>
            </div>
            {isCopied && <Toast variant="success" classNameContainer={styles.toast}>
                {translate("/try-app.code-copied")}
            </Toast>}
        </div>
    )
}

export default Header