import React, {FC, PropsWithChildren} from "react";
import classNames from "classnames";
import {Popover} from "@headlessui/react";
import {useFloating} from "@floating-ui/react";
import {createPortal} from "react-dom";
import {TestableCompositeData, useNodesStore} from "./store";
import {__} from "../globals";
import {normalizeTestableGroupMode, TestableGroupTypeId} from "./testableGroupTypes";

export type TestableGroupSeparatorProps = {
    style: 'icon' | 'text',
    className?: string,
    type: TestableCompositeData['type'],
    testableCompositeID: string
}

const groupModeOptions: {id: TestableCompositeData['type'], label: string}[] = [
    {id: TestableGroupTypeId.AND, label: __('AND')},
    /*{id: TestableGroupTypeId.OR, label: __('AND/OR')},
    {id: TestableGroupTypeId.OR_EXCLUSIVE, label: __('OR')},*/
]

export const TestableGroupSeparator: FC<TestableGroupSeparatorProps & PropsWithChildren> = ({testableCompositeID, type, style, children, className = ''}) => {
    const {refs, floatingStyles} = useFloating();
    const updateTestables = useNodesStore(state => state.updateTestables);
    const normalizedType = normalizeTestableGroupMode(type) || type

    return <>
        <Popover>
            <Popover.Button ref={refs.setReference} className={classNames({
                'text-4x  font-semibold text-purple-tint-90 leading-[18px]': style === 'icon',
                'text-smaller-2 text-purple-tint-80 font-medium': style === 'text',
                [className]: !!className,
            })}>{children}</Popover.Button>
            {createPortal(
                <Popover.Panel ref={refs.setFloating} className="bg-gray-100 bg-opacity-80 p-1 rounded-3 border-gray-200 border-px z-[1000000]" style={{
                    backdropFilter: 'blur(20px)',
                    boxShadow: '0px 11px 57px -15px #7e8183',
                    ...floatingStyles
                }}>
                    <p className={"text-smaller-1 text-gray-600 px-4 max-w-40 leading-4 pt-1 pb-3"}>{__('Select the mode for all groups in this group')}</p>
                    <div className={'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full rounded-[16px] border-[2px] border-gray-150 border-opacity-80 p-[1px] box-content'}>
                    </div>
                    <div className="flex flex-col">
                        {groupModeOptions.map((mode) => {
                            return <button disabled={normalizedType === mode.id} className={classNames('relative text-base text-left --w-full h-6 px-4 rounded-4 whitespace-nowrap', {
                                'hover:bg-gray-150 hover:bg-opacity-80 text-gray-700': normalizedType !== mode.id,
                                'bg-gray-150 bg-opacity-80 text-gray-500 cursor-default': normalizedType === mode.id,
                            })} onClick={() => {
                                updateTestables(testables => {
                                    testables.changeTestableGroupOptions(testableCompositeID, {type: mode.id})
                                })
                            }}>
                                {__('Change mode to')} {mode.label}
                            </button>;
                        })}
                    </div>
                </Popover.Panel>,
                document.body
            )}
        </Popover>
    </>
}