import React, {FC} from "react";
import {NodeWithAnchors} from "./NodeWithAnchors";
import {NodeProps} from "@xyflow/react";
import {getTierCardColor} from "./tree/getTierCardColor";
import {Card} from "./tree/Card";
import {CardItem} from "./tree/CardItem";
import {useCardRenderer} from "./tree/hooks";
import {getComponentMetaFromType} from "./tree/ComponentsMeta";
import {isConfigurable} from "./TestablesPopupWindow";
import {PopupWindowStateContext, TreeContextData} from "./tree/atoms";
import {TestablesSaver} from "./tree/TestablesSaver";
import {useOpenTestablesPopupWindow} from "./tree/useOpenTestablesPopupWindow";
import {CardRendererFromCardComponentDataDecorator} from "./tree/CardRenderer";
import {ConditionColorPalette} from "./tree/Colors";
import {useTreeNodeTestable} from "./tree/TreeHooks";

export type TieredBaseNodeProps = {}
/**
 * Things to do:
 * -on lick, edit if it supports edition by calling configurable(context being 'tier-base),
 * -if it can, edit the testable popup window with this scope
 * -save it as ususal
 *
 * - if it doesn't support edition, do not change the color on hgver and do not allow click
 */
export const TieredBaseNode: FC<TieredBaseNodeProps & NodeProps> = ({id, data}) => {
    const cardRenderer = useCardRenderer(id, 'testables') as CardRendererFromCardComponentDataDecorator | undefined
    const testableNode = useTreeNodeTestable(id)
    const parentCompositeData = testableNode?.getTestable().getParent()?.getData()
    const conditionPalette = (
        parentCompositeData
        && typeof parentCompositeData === 'object'
        && 'conditionColorPalette' in parentCompositeData
        && typeof parentCompositeData.conditionColorPalette === 'string'
    ) ? parentCompositeData.conditionColorPalette as ConditionColorPalette : undefined
    const color = getTierCardColor(cardRenderer?.testableType || 'filter', {
        conditionPalette,
        place: 'tier-base',
    })
    const openTestablePopupWindow = useOpenTestablesPopupWindow()
    if (!cardRenderer) {

        console.log('Log: No card renderer for tiered base node!', id, data)
        return;
    }
    const meta = getComponentMetaFromType(cardRenderer.type!)
    if (!meta) {
        console.log('Log: No meta for tiered base node!', id, data, cardRenderer)
        return;
    }
    const scope: PopupWindowStateContext<any>['scope'] = 'tier-base'

    const canBeEdited = isConfigurable(meta, scope)

    const openPopup = () => {
        const context = {
            id: 'tiered-base-edit',
            scope: scope,
            data: {
                componentType: cardRenderer.testableType,
                targetType: 'testableComposite',
                supportsMultipleComponents: false,
                supportsOptionalQuantity: false,
                mode: 'edit',
                targetId: id
            }
        } as PopupWindowStateContext<TreeContextData>

        openTestablePopupWindow({
            context,
            onClose: (data) => {
                if (data.status !== 'success' || !data.components) {
                    return
                }
                // @ts-ignore
                const saver = new TestablesSaver(context)

                saver.update(data.components)
            }
        });
    }
    return <NodeWithAnchors data={data} color={color}>
        <Card color={color}>
            <CardItem color={color}
                      position={'single'}
                      context={'tier-base'}
                      className={'overflow-hidden rounded-[18px]'}
                      cardRenderer={cardRenderer}
                      onClick={canBeEdited ? openPopup : undefined}
            />
        </Card>
    </NodeWithAnchors>
}