import React, {FC, useEffect} from "react";
import {colors} from "./Colors";
import {Color, CurrentColor, request} from "./Color";
import {Card} from "./Card";
import {CardItem} from "./CardItem";
import {__} from "../globals";
import {CardItemSecondaryValue} from "./CardItemSecondaryValue";
import {CardItemMainValue} from "./CardItemMainValue";
import {PopupWindowStateContext, TestablesPopupWindowStateAtom, TreeContextData} from "./atoms";
import {useSetAtom} from "jotai";
import {TestablesSaver} from "./TestablesSaver";
import {useOpenTestablesPopupWindow} from "./useOpenTestablesPopupWindow";
import {getSuggestedScopeForTestable} from "./getSuggestedScopeForTestable";

export type PlaceholderContextProps = {
    testableCompositeId: string
}

export const PlaceholderContext: FC<PlaceholderContextProps> = ({testableCompositeId}) => {
    const color = colors.purple//colors.gray
    const openTestablePopupWindow = useOpenTestablesPopupWindow();

    return <div className={'relative w-[max-content] space-y-2 left-1/2 -translate-x-1/2'} onClick={async () => {
        const suggestedScope = await getSuggestedScopeForTestable(testableCompositeId);

        const context = {
            id: 'context-placeholder',
            scope: 'tree-node',
            data: {
                componentType: 'filter',
                targetType: 'testableComposite',
                targetId: testableCompositeId,
                extraData: {
                    suggestedScope,
                }
            }
        } as PopupWindowStateContext<TreeContextData>

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

                // @ts-ignore
                const saver = new TestablesSaver(context)
                // @ts-ignore
                saver.add(data.components)
            }
        })

    }}>
        <Card outerRing={true} outerRingColor={{default: {color, tint: (color, type, context) => color.border(20)}}} color={{
            color,
            tint: (color, type, context, path) => {
                 if (path === 'border.light.primary') {
                    return (color as Color).border(90)
                }
            }
        }}
        >
            <CardItem color={{
                        color,
                        tint: (color, type, context, path) => {
                            if (context === 'icon-background') {
                                return (color as Color).background(10)
                            } else if (context === 'icon-color') {
                                return (color as Color).text(90)
                            }  else if (context === 'card-background') {
                                return (color as Color).background(80)
                            }
                        }
                     }}
                      position={'single'}
                      cardRenderer={{
                          icon: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                      fill="currentColor" className={className}>
                              <path fillRule="evenodd"
                                    d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                    clipRule="evenodd"/>
                          </svg>,
                          ComputedValue: () => <CardItemMainValue
                              color={{
                                  color,
                                  tint: (color) => color.text(10)
                              }}
                          >
                              {__('Add another set')}
                          </CardItemMainValue>,
                          BelowComputedValue: () => <div className={`text-smaller-2  leading-[12px]  -mt-1 max-w-32 ${request(color, 'label.description.text').text(20)}`}>
                              <div>{__('Different products, brands, more...')}</div>
                          </div>
                      }}
            />
        </Card>
    </div>
}