import { useEffect, useState } from "react";

import type { MetricsMessengers } from "@model/metrics";

type MetricsGoal = {
  type: "reachGoal";
  id: number;
  goal: string;
};

type ExtendedWindow = Window & { _tmp?: MetricsGoal[] };

const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
  if (vkPixelId) {
    (window as ExtendedWindow)._tmp?.push({
      type: "reachGoal",
      id: vkPixelId,
      goal,
    });
  }
};

export const useVkMetricsGoals = (vkPixelId: number | undefined) => {
  const [vkId, setVkId] = useState<number | undefined>(undefined);

  useEffect(() => {
    if (vkPixelId) {
      setVkId(vkPixelId);
    }
  }, [vkPixelId]);

  return {
    // Посетитель открыл квиз
    quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
    // Посетитель нажал на кнопку стартовой страницы
    firstPageOpened: () => sendMetrics(vkId, "penaquiz-startquiz"),
    // Посетитель кликнул по номеру телефона на стартовой странице
    phoneNumberOpened: () => sendMetrics(vkId, "penaquiz-phone"),
    // Посетитель кликнул по email на стартовой странице
    emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
    // Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
    resultShown: (resultId: string) =>
      sendMetrics(vkId, `penaquiz-result-${resultId}`),
    // Посетитель дошёл до формы контактов
    contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
    // Посетитель заполнил форму контактов
    contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
    // Посетитель отправил заявку с мессенджером
    messengerRequestSended: (messenger: MetricsMessengers) =>
      sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
    // Посетитель прошёл вопрос
    questionPassed: (questionId: string) =>
      sendMetrics(vkId, `penaquiz-step${questionId}`),
  };
};