import React, {FC} from "react";
import {EmulatedButton} from "./EmulatedButton";
import {__} from "../globals";
import {useOpenTestablesPopupWindow} from "./useOpenTestablesPopupWindow";
import {convertTestableData, useNodesStore} from "./store";
import {PopupWindowStateContext, TreeContextData} from "./atoms";
import {wrapTestablesInDefaultGroup} from "./NodeHelpers";
import {TestableFormat} from "./testables";

export type NoPreconditionsProps = {}

export const NoPreconditions: FC<NoPreconditionsProps> = ({}) => {
    const openTestablesPopup = useOpenTestablesPopupWindow()
    const addTestables = useNodesStore(store => store.addTestables)
    const openConditionsPanel = () => {
        // @ts-ignore
        const context = {
            id: 'preconditions-new',
            scope: 'preconditions',
            data: {
                componentType: 'condition',
                targetType: 'ghost', // root | testableComposite
                targetId: null, // string id if testableComposite, index if root (eg: 0 for the first root, 1 for the second root, etc)
                showTabs: false
            }
        } as PopupWindowStateContext<TreeContextData>

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

                addTestables([
                    [wrapTestablesInDefaultGroup(convertTestableData(data.components), undefined, 'OR')],
                    TestableFormat.Nested
                ], (addedIds, testablesManager, writeableStore) => {
                    // set the created testable group id as the preconditionsID
                    const rootGroupID = addedIds?.[0] as string | undefined

                    if (!rootGroupID) {
                        return
                    }

                    writeableStore.preconditionsID = rootGroupID
                })
            }
        })

    }

    return <div className="space-y-1 w-full">
        <EmulatedButton onClick={openConditionsPanel}
                        className={'rounded-1 min-w-50 w-full flex flex-col gap-y-2 bg-gray-800 bg-opacity-[0.30] border-gray-400 border-px ring-[2px] ring-gray-100 ring-opacity-60 ring-offset-1  z-[100000] --h-[98%] p-4 text-gray-100 group hover:bg-opacity-40 transition-all hover:scale-[1.02] active:scale-[0.98]'}
                        style={{
                            /*
                                        background: 'linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 55%, rgba(0,0,0,0) 100%)',
                            */
                            backdropFilter: 'blur(10px)',
                        }}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                 className="min-w-7 min-h-7 max-w-7 max-h-7 flex group-hover:hidden">
                <path fillRule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                      clipRule="evenodd"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                 className="min-w-7 min-h-7 max-w-7 max-h-7 hidden group-hover:flex">
                <path fillRule="evenodd"
                      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
                      clipRule="evenodd"/>
            </svg>
            <h1 className="text-3x text-current text-left">
                <span className={'flex group-hover:hidden'}>{__('No preconditions')}</span>
                <span className={'hidden group-hover:flex'}>{__('Add preconditions')}</span>
            </h1>
        </EmulatedButton>
        <p className="flex items-center gap-x-1 text-smaller-1 text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                 className="min-w-3 min-h-3 max-w-3 max-h-3">
                <path fillRule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                      clipRule="evenodd"/>
            </svg>
            <span>Any date, cart subtotal, role, etc.</span>
        </p>
    </div>
}