import React, { useContext, ComponentProps } from "react";
import MagicPopup from "./MagicPopup";
import './../../css/components/magicPopupContainer.css';
import { PopupContext } from "../contexts/PopupContext";

/**
 * Компонент контейнера для всплывающих окон, который вызывается на странице и куда передается массив всплывающих окон 
 */

//ГАВРИЛОВ. ЛОГИЧНЕЕ ЭКСПОРТИРОВАТЬ ТИП С ПРОПСАМИ КОМПОНЕНТА ИЗ САМОГО КОМПОНЕНТА MAGICPOPUP? 
/**
 * Дополнительный экспорт типа MagicPopup из компонента всплывающего окна для возможности его импорта, в свою очередь, из компонента, собирающего страницу, например TaxiPage TaxiPage
 */
export type MagicPopupType = ComponentProps<typeof MagicPopup>;
/**
 * Метод рендеринга контейнара для всплывающих окон
 * @param {array} magicPopupArr массив объектов типа MagicPopup с информацией о всплывающем окне: текст, таймер и т.д.
 * @param {callable} delHiddenPopupFunc колбэк для закрытия конкретного всплывающего окна по его уникальному идентификатору
 * @returns ReactNode
 */
export default function MagicPopupContainer ()
{
  const popupArr = useContext(PopupContext);

  return (
    //Родительский контейнер для всех всплывающих окон
    <div id = "popup-parent-container">
      {/* { magicPopupArr.map( (propsObj: MagicPopupType, index: number) => ( */}
      { popupArr.popupArrTest.map( (propsObj: MagicPopupType, index: number) => (
        <MagicPopup
          //Подробнее описание пропсов компонента смотри в MagicPopup.tsx
          id = {propsObj.id}
          key = {propsObj.id}
          message = {propsObj.message}
          timeOut = {propsObj.timeOut}    
          type = {propsObj.type}          
          renderIndex = {index}           
          //onClose = {delHiddenPopupFunc}
          onClose = {popupArr.delPopupTest}
        />
        ))
      }
    </div>
  )
}