import React, {FC} from "react";
import {EmulatedButton} from "./EmulatedButton";
import {__, CouponsPlus} from "../globals";
import {useOpenTestablesPopupWindow} from "./useOpenTestablesPopupWindow";
import {convertTestableData, useNodesStore} from "./store";
import {PopupWindowStateContext, TreeContextData} from "./atoms";
import {wrapTestablesInDefaultGroup} from "./NodeHelpers";
import {TestableFormat} from "./testables";
import {WeeklyScheduleMeta} from "./cards/conditions/WeeklySchedule";
import {HolidaysMeta} from "./cards/conditions/Holidays";
import {predatesConditionPalette} from "./predatesPalette";

export type noPredatesProps = {}

export const NoPredates: FC<noPredatesProps> = ({}) => {
    const openTestablesPopup = useOpenTestablesPopupWindow()
    const addTestables = useNodesStore(store => store.addTestables)
    const openConditionsPanel = () => {
        // @ts-ignore
        const context = {
            id: 'predates-new',
            scope: 'predates',
            data: {
                componentType: 'condition',
                conditionColorPalette: predatesConditionPalette,
                targetType: 'ghost', // root | testableComposite
                supportedComponents: [
                    CouponsPlus?.components?.conditions?.Date?.type,
                    CouponsPlus?.components?.conditions?.WeeklySchedule?.type ?? WeeklyScheduleMeta.id,
                    CouponsPlus?.components?.conditions?.Holidays?.type ?? HolidaysMeta.id

                ],
                supportsMultipleComponents: false,
                showTabs: false,
                targetId: null, // string id if testableComposite, index if root (eg: 0 for the first root, 1 for the second root, etc)
                mainWindow: {
                    title: __('Schedule'),
                    description: __('Add a schedule that restricts when this coupon is available.')
                }
            }
        } 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.predatesID = 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-600 bg-opacity-[0.40] 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(12px)',
                        }}>
            <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">
                <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 6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-3.75V6Z" clipRule="evenodd" />
            </svg>
            <h1 className="text-3x text-current text-left">
                <span className={'flex group-hover:hidden'}>{__('Available anytime')}</span>
                <span className={'hidden group-hover:flex'}>{__('Schedule')}</span>
            </h1>
        </EmulatedButton>
        {false && <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></span>
        </p>}
    </div>
}