import * as d3 from 'd3';
import { NetlistRender } from '.';
import { globalSetting } from '../global';
import { LAYOUT_CONSTANT } from './layout';
import { svgResource } from '../skin/draw';

export class InstantiationRender {
    /**
     * 
     * @param {d3.Selection} selection 
     * @param {NetlistRender} rootRender 
     */
    constructor(selection, rootRender) {
        this.parentSelection = selection;
        this.rootRender = rootRender;

        /**
         * @type {BasicD3DataItem[]}
         */
        this.data = []

        /**
         * @description id 到管理数据项的映射
         * @type {Map<string, BasicD3ManagmentItem[]>}
         */
        this.id2manager = rootRender.id2manager;
    }

    /**
     * @description 将 elknode 关于 例化模块 的数据添加为 d3 数据项目
     * @param {import('../jsdoc').ElkNode} node 
     */
    addAsD3DataItem(node) {
        const nodeModule = this.rootRender.nameToModule.get(node.renderName);
        const view = nodeModule.view;
        const textPadding = 5;
        const portnames = [];

        // 当前的例化是否为一个展开的例化
        this.isExpanded = (node.children || []).length > 0;
        const topPadding = this.isExpanded ? 25 : 0;

        for (const port of node.ports || []) {
            const isInput = port.x < LAYOUT_CONSTANT.INSTANTIATION_WIDTH;
            const align = isInput ? 'left': 'end';
            const portX = isInput ? port.x + textPadding : port.x - textPadding - LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN - LAYOUT_CONSTANT.INSTANCE_RIGHT_MARGIN;
            const portY = this.isExpanded ? port.y - 10: port.y;
            
            portnames.push({
                name: port.renderName,
                x: portX,
                y: portY,
                align
            });
        }
        

        this.data.push({
            id: node.id,
            type: node.renderName,  // 例化模块的模块名字
            x: node.x,
            y: node.y,
            name: node.name,
            width: node.width,
            height: node.height + topPadding,
            topPadding,
            text: node.renderName,
            portnames,
            rx: 3,
            ry: 3,
            // 数据本身
            _self: node
        });
    }

    render() {
        const data = this.data;
        const rootRender = this.rootRender;
        const id2manager = this.id2manager;
        const _this = this;

        // 外部控制主体的 g
        let instantiationSelections = this.parentSelection.selectAll('g.instance')
            .data(data)
            .enter()
            .append('g')
            .attr('class', 'instance')
            .attr("transform", d => `translate(${d.x}, ${d.y})`);
        
        // 例化模块的方块
        let instances = instantiationSelections.append('rect')
            .attr('x', LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN)
            .attr('y', d => LAYOUT_CONSTANT.INSTANCE_TITLE_HEIGHT - d.topPadding)
            .attr('width', data => data.width - LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN - LAYOUT_CONSTANT.INSTANCE_RIGHT_MARGIN)
            .attr('height', data => data.height - LAYOUT_CONSTANT.INSTANCE_TITLE_HEIGHT);
        

        // 说明文字
        let texts = instantiationSelections.append('text')
            .attr('x', LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN)
            .attr('y', d => LAYOUT_CONSTANT.INSTANCE_TITLE_HEIGHT - 8 - d.topPadding)
            .attr('dominant-baseline', 'middle')
            .attr('text-anchor', 'left')
            .attr('fill', 'var(--foreground)')
            .attr('font-size', '14px')
            .attr('class', 'port-caption')
            .text(data => data.name)
            .each(function(data) {
                const text = d3.select(this);
                const bbox = text.node().getBBox();                
                data.textX = (data.width - bbox.width) / 2;
            })
            .attr('x', d => d.textX)


        // 渲染 portnames
        instantiationSelections.each(function(node) {
            d3.select(this)
                .selectAll('.port-name')
                .data(node.portnames)
                .enter()
                .append('text')
                .attr('class', 'port-name')
                .attr('x', d => d.x + LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN)
                .attr('y', d => d.y)
                .attr('dominant-baseline', 'middle')
                .attr('text-anchor', d => d.align)
                .attr('fill', 'var(--foreground)')
                .attr('font-size', '11px')
                .text(d => d.name);
        });


        // 增加一个背景方块，防止 svg 点不到
        let bgFullScreenSelections = instantiationSelections.append('rect')
            .attr('x', 5 + LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN)
            .attr('y', d => LAYOUT_CONSTANT.INSTANCE_TITLE_HEIGHT + 5 - d.topPadding)
            .attr('width', 20)
            .attr('height', 20)
            .attr('opacity', 0)
            .attr('class', 'pointer')
            .on('click', function(data) {
                const selection = d3.select(this);
                const d = selection.datum();
                const children = d._self.children || [];
                if (children.length > 0) {
                    rootRender.collapseInstance(selection);
                } else {
                    rootRender.expandInstance(selection);
                }
            });
        
        
        const id2element = new Map();

        // 渲染左上角的放大缩小图标，并注册对应的展开/收起事件
        let fullSreenSelections = instantiationSelections.append(data => {
            // 获取全屏图标
            const element = svgResource.get('full-screen');
            element.setAttribute('x', 5 + LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN);
            element.setAttribute('y', LAYOUT_CONSTANT.INSTANCE_TITLE_HEIGHT + 5 - data.topPadding);
            element.setAttribute('width', 20);
            element.setAttribute('height', 20);
            element.setAttribute('class', 'pointer');

            return element;
        })
        .each(function(data) {
            const svgElement = d3.select(this);
            id2element.set(data.id, svgElement);
        })
        .on('mouseenter', function() {
            const svgElement = d3.select(this);
            svgElement.selectAll("*")
                .attr("fill", "var(--instance-color)");
        })
        .on('mouseleave', function() {
            const svgElement = d3.select(this);
            svgElement.selectAll("*")
                .attr("fill", "var(--foreground)");
        })
        .on('click', function(data) {
            const selection = d3.select(this);
            const d = selection.datum();
            const children = d._self.children || [];

            if (children.length > 0) {
                rootRender.collapseInstance(selection);
            } else {
                rootRender.expandInstance(selection);
            }
        });

        bgFullScreenSelections
            .on('mouseenter', function(_, data) {
                const svgElement = id2element.get(data.id);
                svgElement.selectAll("*")
                    .attr("fill", "var(--instance-color)");
            })
            .on('mouseleave', function(_, data) {
                const svgElement = id2element.get(data.id);
                svgElement.selectAll("*")
                    .attr("fill", "var(--foreground)");
            });

        if (globalSetting.renderAnimation) {
            instances
                .transition()
                .duration(1000)
                .attr('fill', d => {
                    const children = d._self.children || [];
                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
                })
                .attr('stroke', 'var(--instance-color)')
                .attr('stroke-width', 2);

        } else {
            instances
                .attr('fill', d => {
                    const children = d._self.children || [];
                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
                })
                .attr('stroke', 'var(--instance-color)')
                .attr('stroke-width', 2)            
        }

        instantiationSelections
            .attr('class', 'grab')
            .each(function (data) {                    
                const portSelection = d3.select(this);
                // const manager = _this.createDataManager(portSelection, data);

                // TODO: 实现拖拽
                // registerDragEvent(manager, rootRender);       
            });
            
        this.selections = instantiationSelections;
        return instantiationSelections;
    }

    /**
     * 
     * @param {d3.Selection} selection 
     * @param {BasicD3DataItem} data 
     * @returns {BasicD3ManagmentItem}
     */
    createDataManager(selection, data) {
        const id2manager = this.id2manager;
        // 创建拖拽上下文
        const dragContext = {
            neighbors: [],
            elkGraph: {
                // elk 是无状态的，id 取什么名字都行
                id: 'root',
                children: [],
                edges: [],
                layoutOptions: {}
            }
        }
        const managerItem = {
            data,
            selection,
            type: 'cell',
            dragContext
        };

        if (!id2manager.has(data.id)) {
            id2manager.set(data.id, []);
        }

        id2manager.get(data.id).push(managerItem);
        return managerItem;
    }
}