import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { images } from "../../data"
import YourAccessCode from "../TryApp/components/YourAccessCode"
import styles from "./styles.module.scss"
import { copyToClipboard } from "@/services/data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function CodeInstruction() {
    const code = useSelector(selectors.selectAuthCode);
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);

    const downloadApp = async () => {
        metricService.reachGoal(EGoals.DOWNLOAD_APP, [EMetrics.YANDEX]);
        metricService.reachGoal(EGoals.BLACK_BUTTON, [EMetrics.FACEBOOK]);
        await copyToClipboard(code);
        // TODO
        window.location.href =
            "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549";
    };

    return (
        <div className={styles.container}>
            <p className={styles.instructionPoint} style={{
                marginBottom: "16px",
                marginTop: "8px"
            }}>{translate("/code-instruction.instruction_point_1")}</p>
            <YourAccessCode />
            <p className={styles.instructionPoint} style={{
                marginTop: "56px"
            }}>{translate("/code-instruction.instruction_point_2")}</p>
            <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
            <p className={styles.notShareDescription}>
                {translate("/code-instruction.not_share_description")}
            </p>
        </div>
    )
}

export default CodeInstruction