import { Connector, NodeEditor, Node } from "./index";

export class NodeDetails{
    protected nodeEditor: NodeEditor;
    protected element: HTMLElement;
    protected titleElement: HTMLElement;
    protected descriptionElement: HTMLElement;
    protected closeElement: HTMLElement;
    protected inputsElement: HTMLElement;
    protected outputsElement: HTMLElement;
    /**
     * Creates a new details panel for the given node editor.
     */
    constructor(nodeEditor: NodeEditor){
        this.nodeEditor = nodeEditor;

        this.element = NodeEditor.createElement("div", "f-node-details", null, this.nodeEditor.getElement());

        //Title
        const titleContainer = NodeEditor.createElement("div", "f-node-details-title-container", null, this.element);
        this.titleElement = NodeEditor.createElement("span", "f-node-details-title", "Details", titleContainer);

        //Close button
        this.closeElement = NodeEditor.createElement("span", "f-node-details-close", "×", titleContainer);
        this.closeElement.addEventListener("click", () => this.hide());

        //Description
        this.descriptionElement = NodeEditor.createElement("p", "f-node-details-description", null, this.element);

        //Inputs
        NodeEditor.createElement("h3", "f-node-details-subtitle", "Inputs", this.element);
        this.inputsElement = NodeEditor.createElement("dl", "f-node-details-fields", null, this.element);

        //Outputs
        NodeEditor.createElement("h3", "f-node-details-subtitle", "Outputs", this.element);
        this.outputsElement = NodeEditor.createElement("dl", "f-node-details-fields", null, this.element);
    }

    /**
     * Show the details panel for the given node.
     * @param node Node to show
     */
    public show(node: Node){
        this.titleElement.innerText = node.getName();
        this.descriptionElement.innerText = node.getDescription();
        this.inputsElement.replaceChildren(...this.createConnectorInfos(node.inputs));
        this.outputsElement.replaceChildren(...this.createConnectorInfos(node.outputs));
        this.element.classList.add("f-show");
        
    }

    /**
     * Hides the detauls panel
     */
    public hide(){
        this.element.classList.remove("f-show");
    }

    /**
     * Generator for then connector infos.
     * @param connectors Objext of name Connector pairs
     */
    protected *createConnectorInfos(connectors: Record<string, Connector>): Generator<HTMLElement>{
        for(const [name, connector] of Object.entries(connectors)){
            const nameElement =  NodeEditor.createElement("dt", "f-node-details-name", name);
            const typeElement = NodeEditor.createElement("span", "f-node-details-type", connector.getType() ?? "any", nameElement);
            typeElement.style.background = connector.getColor();
            yield nameElement;
            const testData = connector.getTestData();
            yield NodeEditor.createElement("dd","f-node-details-value", testData?.value || " ");
        }
    }
}