import {TestableComposite} from './TestableComposite';
import {colors, getColorForComponentType} from "./Colors";
import {Handle} from "./Handle";
import {NodeProps, Position} from '@xyflow/react';
import {TestableCompositeData} from "./store";
import {NodeWithAnchors} from "../NodeWithAnchors";
import {motion} from 'motion/react';
import {FC} from "react";
import {TestableCompositeNode} from "./TestableCompositeNode";
import {__} from "../globals";
import {useTreeNodeTestable} from "./TreeHooks";
import {TestableGroupTypeId} from "./testableGroupTypes";

let activeIntervalIds = []
export const TestableCompositeRenderer: FC<NodeProps> = ({id}) => {
    //id = id?.includes('->testable')? id.replace('->testable', '') : id
    //const isARootNode: boolean = useParentId(id) === undefined
    //const {renderedNodeType, isDefaultAND} = renderedNodeData
    const testablecompositeNode = useTreeNodeTestable(id)

    if (!testablecompositeNode) {
        console.error('TestableCompositeRenderer: testablecompositeNode not found', id)
        return null;
    }
    const isARootNode: boolean = testablecompositeNode.isRoot()//renderedNodeType === 'root'
    const isDefaultAND = testablecompositeNode.getTestable().isDefault()
    const data = testablecompositeNode.getTestable().getData() as TestableCompositeData
    //const data = useNodeData(id) as TestableCompositeData
//    const updateNodeInternals = useUpdateNodeInternals();

    if (!data) {
        return null;
    }
    const {mode} = data
    const componentType = mode === 'test' ? 'condition' : mode
    const color = getColorForComponentType(componentType, {
        conditionPalette: data.conditionColorPalette,
    })

    const testableComposite = <TestableComposite id={id} color={color} isRoot={isARootNode} removable={true}/>;

    if (isARootNode) {
        return <div className={'relative testable-composite-group'}>
            <Handle type={'target'} position={Position.Top} color={{
                color: colors.gray,
                tint(color, type, context) {
                    return color.text(20)
                }
            }} />
            {testableComposite}
            <Handle type={'source'} position={Position.Bottom} id={'bottom'}
                    color={color}/>
            <div className={"translate-x-1/2 pl-3 py-2 flex flex-col items-start gap-[2px] text-purple-tint-70 pointer-events-none"}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="min-w-3 min-h-3 max-w-3 max-h-3">
                    <path d="M7.628 1.099a.75.75 0 0 1 .744 0l5.25 3a.75.75 0 0 1 0 1.302l-5.25 3a.75.75 0 0 1-.744 0l-5.25-3a.75.75 0 0 1 0-1.302l5.25-3Z" />
                    <path d="m2.57 7.24-.192.11a.75.75 0 0 0 0 1.302l5.25 3a.75.75 0 0 0 .744 0l5.25-3a.75.75 0 0 0 0-1.303l-.192-.11-4.314 2.465a2.25 2.25 0 0 1-2.232 0L2.57 7.239Z" />
                    <path d="m2.378 10.6.192-.11 4.314 2.464a2.25 2.25 0 0 0 2.232 0l4.314-2.465.192.11a.75.75 0 0 1 0 1.303l-5.25 3a.75.75 0 0 1-.744 0l-5.25-3a.75.75 0 0 1 0-1.303Z" />
                </svg>
                <p className={'text-smaller-1'}>{__('Filter items')}</p>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3">
                    <path fillRule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.22 1.22V2.75A.75.75 0 0 1 8 2Z" clipRule="evenodd" />
                </svg>
            </div>
        </div>;
    }

    /**
     * Bellow is for the OR/Path ranch not supported yet
     */
    return;
    let leftX: number = 0;
    let rightX: number = 0;
    const outerRing = 2;

    if (isDefaultAND) {
        leftX = 8 + outerRing
        rightX = (leftX + outerRing - 1) * -1
    } else if (data.type === TestableGroupTypeId.OR) {
        rightX = ((7 * 4) + outerRing) * -1
    }

    return <div className={'relative testable-composite-group'}>
        <motion.div layout={true} transition={{duration: 0.5}}>
            <NodeWithAnchors color={color} data={renderedNodeData} leftX={leftX} rightX={rightX}
                             handlesOverContent={true}>
                {testableComposite}
            </NodeWithAnchors>
        </motion.div>
    </div>;
};