import React, { createContext, useState } from "react";
import { MagicPopupType } from "../components/MagicPopupContainer";
import MagicPopupContainer from "../components/MagicPopupContainer";

//гаврилов. передай значением по умолчанию null и спроси у ChatGPT (deepseek не справляется) почему при указании null возникает ошибка в аргументе value 
export const PopupContext = createContext(''); 

/**
 * Контекст для компонента всплывающих окон
 */
export const PopupProvider = ({ children }) => {
  const [popupArrTestVar, setPopupArrTestVar] = useState<MagicPopupType[] | []>( [] );

  function addPopupTest (newPopupArrData: MagicPopupType[]) {
    setPopupArrTestVar(prev => {
      //Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
      return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
    });
  };

  //Колбэк для удаления попапа из набора
  function delPopupTest (popupDelKey: number) {
    setPopupArrTestVar(prev => {
      return prev.filter(popup => popup.id !== popupDelKey);
    });
  };

  function getRandomId(): number { return Date.now() - Math.random() };

  const value = {
    popupArrTest: popupArrTestVar,
    //ГАВРИЛОВ. переименуй
    addPopupArrTest: addPopupTest,
    delPopupArrTest: delPopupTest,
  };

  return <PopupContext.Provider value={value}>
    {children}
    <MagicPopupContainer />
  </PopupContext.Provider>
}