import React, {FC} from "react";
import {Container} from "./Container";
import {Button} from "./Button";
import {__, CouponsPlus} from "../../globals";
import {PopupWindowStateContext, TreeContextData} from "../atoms";

import {useOpenTestablesPopupWindow} from "../useOpenTestablesPopupWindow";
import {convertTestableData, useNodesStore} from "../store";
import {wrapTestablesInDefaultGroup} from "../NodeHelpers";

export type CustomFilteredItemsMapFieldProps = {
    testableId: string,
    onChange: (testableId: string) => void,
}

export const CustomFilteredItemsMapField: FC<CustomFilteredItemsMapFieldProps> = ({testableId, onChange}) => {
    const openTestablePopupWindow = useOpenTestablesPopupWindow();
    const addTestable = useNodesStore(store => store.addTestable)

    return <Container>
        {testableId && <p>{__('Your selected filters')}</p>}
        <Button preset={'blue'} onClick={() => {
            // here we'll open an instance of the custom filtered items map modal with only filters supported
            const context = {
                id: 'offer-custom-filtered-items-map',
                scope: 'custom-filtered-items-map',
                data: {
                    supportsMultipleComponents: false,
                    supportedComponentTypes: ['filter'],
                    supportedComponents: [
                        CouponsPlus?.components?.filters?.Attributes.type,
                        CouponsPlus?.components?.filters?.InBrands.type,
                        CouponsPlus?.components?.filters?.InCategories.type,
                        CouponsPlus?.components?.filters?.Products.type,
                        CouponsPlus?.components?.filters?.InTags.type
                    ],
                    componentType: 'filter',
                    targetType: 'ghost',
                    mode: 'create',
                }
            } as PopupWindowStateContext<TreeContextData>

            openTestablePopupWindow({
                // @ts-ignore
                context,
                onClose: (data) => {
                    /**
                     * This might be the source of a leak because if the user cancels this popup, these filters would have been added to memory
                     * we have no reliable way to remove them on cancel because what if the user has added other filters prior to
                     * opening the offers popup and then decides to cancel? if we remove the id on cancel, we might remove the filters that were added before
                     *
                     */
                    const selectedFilters = convertTestableData(data.components).map(filter => ({
                        ...filter,
                        testableType: data.componentType,
                    }));

                    addTestable(selectedFilters[0], id => {
                        if (id) {
                            onChange(id)
                        }
                    })
                }
            })
        }}>
            {__('Select Items...')}
        </Button>
    </Container>
}
