import { NodeProps } from "@xyflow/react"
import React, { FC } from "react"
import {StepAnchorHandles} from "./StepAnchorHandles";
import {request} from "./tree/Color";
import {__} from "./globals";
import {useBranch, useStoreAPI} from "./tree/TreeHooks";
import {getConditionPaletteFromNodeData, getTierBaseColor} from "./tree/tierColorTheme";

export type TieredBaseNodeProps = {
}

export const BranchTieredNode: FC<TieredBaseNodeProps & NodeProps> = ({id}) => {
    const removeTieredBranch = useStoreAPI('removeTieredBranch')
    const branch = useBranch(id)

    if (!branch) {
        console.error('BranchTieredNode: branch not found', id)
        return null;
    }
    const baseTestable = branch.getBaseTestable()
    const baseTestableType = (
        baseTestable
        && typeof baseTestable === 'object'
        && 'testableType' in baseTestable
        && typeof baseTestable.testableType === 'string'
    ) ? baseTestable.testableType : undefined
    const baseMode = (
        baseTestable
        && typeof baseTestable === 'object'
        && 'mode' in baseTestable
        && typeof baseTestable.mode === 'string'
    ) ? baseTestable.mode : undefined
    const parentCompositeData = branch.testableBaseNode?.getTestable().getParent()?.getData()
    const conditionPalette =
        getConditionPaletteFromNodeData(baseTestable)
        || getConditionPaletteFromNodeData(parentCompositeData)
    const color = getTierBaseColor({
        place: 'tier-branch',
        testableType: baseTestableType,
        mode: baseMode,
        inheritedConditionPalette: conditionPalette,
    })

    return <div className={`relative flex items-center justify-center w-3 h-3 rounded-full ${request(color).background(90)}`}>
        <StepAnchorHandles isFirst={true} handles={{bottom: false, left: true, right: false}}>
            <div className={`w-1 h-1 rounded-full ${request(color).background(10)}`}></div>
        </StepAnchorHandles>
        <div className={`absolute top-3 flex items-center space-x-1 text-smaller-3 ${request(color).text(60)} group`}
             onClick={() => removeTieredBranch(id)}
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-3 h-3">
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
            <span>
                <span className={'group-hover:hidden'}>{__('Tiered')}</span>
                <span className={'hidden group-hover:block'}>{__('Remove')}</span>
            </span>
        </div>
    </div>
}