import React, {FC} from "react";
import {useAtomValue} from "jotai";
import {SelectMenuPopupWindowsAtom} from "./atoms";
import {SelectMenuPopupWindow} from "./SelectMenuPopupWindow";

export type SelectMenuPopupWindowsProps = {}

export const SelectMenuPopupWindows: FC<SelectMenuPopupWindowsProps> = ({}) => {
    const selectMenuPopups = useAtomValue(SelectMenuPopupWindowsAtom)
    const renderedPopupIds = new Set<string>()
    const uniqueSelectMenuPopups = selectMenuPopups.filter((popup) => {
        if (renderedPopupIds.has(popup.context.id)) {
            return false
        }

        renderedPopupIds.add(popup.context.id)
        return true
    })

    return <>
        {uniqueSelectMenuPopups.map((data, index) => (
            <SelectMenuPopupWindow
                key={data.context.id}
                data={data}
                index={index}
            />
        ))}
    </>;
}