import React, {FC} from "react";
import {Handle, NodeProps} from "@xyflow/react";
import {Position} from "@xyflow/system";
import {useNodesStore} from "./tree/store";
import {Grove} from "./tree/Grove";
import {__} from "./globals";

export const RootTreeAnchor: FC<NodeProps> = ({id}) => {
    const treeNumber = useNodesStore(store => {
        const grove = Grove.fromState(store)

        let index = grove.getIndexOfTree(id);
        return typeof index === 'number'? index + 1 : '?'
    })

    return <div className="flex flex-col items-center gap-3">
        <div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center">
            <span className={' --text-white text-gray-600'}>{treeNumber}</span>
            <Handle type={'source'} position={Position.Bottom} className={'opacity-0'}/>
        </div>
        <div className="flex flex-col items-center gap-1">
            <div className="flex flex-col items-center gap-[0px] text-gray-200">
                <svg width="84" height="24" viewBox="0 0 84 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-w-19 max-w-19 h-auto">
                    <rect x="0.5" y="0.5" width="83" height="23" rx="7.5" stroke="currentColor"/>
                    <rect x="4" y="4" width="16" height="16" rx="6" fill="currentColor"/>
                    <rect x="24" y="4" width="16" height="16" rx="6" fill="currentColor" fill-opacity="0.85"/>
                    <rect x="44" y="4" width="16" height="16" rx="6" fill="currentColor" fill-opacity="0.75"/>
                    <rect x="64" y="4" width="16" height="16" rx="6" fill="currentColor" fill-opacity="0.60"/>
                </svg>
                <div className={'text-smaller-1 text-gray-300'}>
                    {treeNumber === 1? __('Cart Items') : __('Cart Items Except Previously Discounted')}
                </div>
            </div>
            <svg width="6" height="18" viewBox="0 0 6 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                 className="min-w-3">
                <path d="M4.98529 14.75L2.86765 16.8676M2.86765 16.8676L0.75 14.75M2.86765 16.8676V0.75"
                      stroke="#A6ACB0" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round"
                      stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
}