import visit from 'unist-util-visit';
import h from 'hastscript';
import { Transformer } from 'unified';

/**
 * Tab list and tab directives
 */
const TAB_LIST_DIRECTIVE = 'tabset';
const TAB_DIRECTIVE = 'tab';

/**
 * DX Tab panel list and tab panel component elements
 */
const DX_TAB_PANEL_LIST = 'dx-tab-panel-list';
const DX_TAB_PANEL = 'dx-tab-panel';

const CONTAINER_DIRECTIVE_TYPE = 'containerDirective';

/**
 * This function will take the tabName array string and convert it to the tabObject as expected by dx-tab-panel-list.
 * Example '["TabName1", "TabName2", "TabName3"]' convert it to '[{label: "TabName1"}, {label: "TabName2"}, {label: "TabName3"}]'
 * @param tabNameString string
 * @returns string
 */
function updateProperty(tabNameString: string) {
    const tabNames = JSON.parse(tabNameString);

    const tabObject = tabNames.map((tab: string) => ({
        label: `${tab}`
    }));

    return JSON.stringify(tabObject);
}

function tabsPlugin(): Transformer {
    function transformer(tree: any) {
        // visit container directives and modify them to dx tab components
        visit(tree, (node: any) => {
            if (node.type === CONTAINER_DIRECTIVE_TYPE && node.name === TAB_LIST_DIRECTIVE) {
                const data = node.data || (node.data = {});
                node.attributes.tabs = updateProperty(node.attributes.tabs);
                const hast: any = h(node.name, node.attributes);

                data.hName = DX_TAB_PANEL_LIST;
                // This is consumed by UI to show RNB
                hast.properties.id = 'docs-tab';
                data.hProperties = hast.properties;

                visit(tree, (innerNode: any) => {
                    if (innerNode.type === CONTAINER_DIRECTIVE_TYPE && innerNode.name === TAB_DIRECTIVE) {
                        const data = innerNode.data || (innerNode.data = {});
                        const hast: any = h(innerNode.name, innerNode.attributes);

                        data.hName = DX_TAB_PANEL;
                        data.hProperties = hast.properties;
                    }
                });
            }
        });
    }
    return transformer;
}

export { tabsPlugin };