import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';

export class LasalRuntimeSigControlFilemanagerTree extends LasalRuntimeSigElement {
    static get is() {
        return "sig-control-filemanager-tree";
    }

    static get importMeta() { return import.meta; }

    static get template() {
        return SigPolymer.html`
             <style include="sig-element-css">
            :host {
                /* Basic styling of the component */
            color: var(--theme-sig-control-filemanager-tree-color, inherit);
            background-color: var(--theme-sig-control-filemanager-tree-background-color, transparent);
            background-image: var(--theme-sig-control-filemanager-tree-background-image, none);
            background-repeat: var(--theme-sig-control-filemanager-tree-background-repeat, repeat);
            border-width: var(--theme-sig-control-filemanager-tree-border-width, inherit);
            border-color: var(--theme-sig-control-filemanager-tree-border-color, inherit);
            border-style: var(--theme-sig-control-filemanager-tree-border-style, none);
            border-radius: var(--theme-sig-control-filemanager-tree-border-radius, 0);

            /* Basic box model settings */
            display: var(--theme-sig-control-filemanager-tree-display, block);
            position: var(--theme-sig-control-filemanager-tree-position, absolute);
            top: var(--theme-sig-control-filemanager-tree-top, var(--theme-sig-element-top, auto));
            left: var(--theme-sig-control-filemanager-tree-left, var(--theme-sig-element-left, auto));
            width: var(--theme-sig-control-filemanager-tree-width, var(--theme-sig-element-width, auto));
            height: var(--theme-sig-control-filemanager-tree-height, var(--theme-sig-element-height, auto));
            margin: var(--theme-sig-control-filemanager-tree-margin, 0);
            padding: var(--theme-sig-control-filemanager-tree-padding, 0);
            overflow: var(--theme-sig-control-filemanager-tree-overflow, hidden);
        }

            :host * {
                /* Reset margin and padding for child elements and turn off text selection */
             @apply --notextselect;
            margin: 0;
            padding: 0;
        }

            .clearfix:after {
                /* Import the global clearfix css mixin */
                @apply --clearfix
        }

            .sig-control-filemanager-tree {
                /* should be relative for use in designer */
            position: relative;
            width: 100%;
            height: 100%;
        }

            ul {
            list-style-type: none;
        }

            li {
            line-height: 26px;
            font-size: 16px;
        }

            li span.item {
            display: inline-block;
            line-height: 26px;
            padding: 0 5px;
            word-wrap: nowrap;
            cursor: pointer;
            white-space: nowrap;
            width: auto;
        }

        li span.item:hover,
            li span.item:active {
            background-color: red;
            color: white;
        }

            ul#tree {
            padding: 5px;
            height: auto;
            width: auto;
        }

            ul#tree ul {
            padding: 5px 10px;
            height: auto;
            width: auto;
        }

        li span.item:before,
            li:before {
            font-family: FontAwesomeSolid;
            font-style: normal;
            font-weight: normal;
            font-size: inherit;
            text-decoration: inherit;
            font-size: inherit;
            color: inherit;
            text-shadow: 1px 1px rgba(0, 0, 0, .4);
        }

            li span.item:before {
                padding-right: 5px;
        }

            li:before {
                padding-right: 2px;
        }

            li span.item.active {
                background-color: lightseagreen;
        }

            li span.item.folder:before {
                content: "\\f07b";
            color: orange;
        }

            li span.item.folder.open:before {
                content: "\\f07c" !important;
        }

            li span.item.volume:before {
                content: "\\f0a0" !important;
            font-family: FontawesomeRegular;
        }

            li span.item.file:before {
                content: "\\f15b" !important;
            color: lightgray;
        }

            li.hasnodes:before {
                content: "\\f0da";
        }

            li.open:before {
                content: "\\f0d7" !important;
        }
        </style>
        <div class="sig-control-filemanager-tree clearfix">
            <ul id="tree" class="root">
                <li class="volume open hasnodes">
                    <span class="item open volume">C</span>
                    <ul class="nodes">
                        <li class="folder hasnodes">
                            <span class="item folder">Folder 1</span>
                        </li>
                        <li class="folder open hasnodes active">
                            <span class="item folder open active">Folder 2</span>
                            <ul class="nodes">
                                <li class="folder">
                                    <span class="item folder">Folder 3</span>
                                </li>
                                <li class="folder hasnodes">
                                    <span class="item folder">Folder 5</span>
                                </li>
                                <li class="folder">
                                    <span class="item folder">Folder 5</span>
                                </li>
                                <li class="file active">
                                    <span class="item file active">filename.txt</span>
                                </li>
                                <li class="file">
                                    <span class="item file">filename.txt</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="volume hasnodes">
                    <span class="item volume">D</span>
                </li>
            </ul>
        </div>
        `;
    }
    static get properties() {
        // property names should always be lower case so we
        // can use them directly on the element as an attribute
        let props = {
            data: {
                type: Array,
                value: () => { return [] },
                observer: '_updateData'
            },
            config: {
                type: Object,
                value: () => { return {} },
                observer: '_updateConfig'
            }
        }
        return props;
    }

    constructor() {
        super();
    }

    connectedCallback() {
        super.connectedCallback();
    }

    disconnectedCallback() {
        super.disconnectedCallback();
    }

    attributeChangedCallback(name, old, value) {
        super.attributeChangedCallback();
    }

    ready() {
        super.ready();
    }

    _updateData(newval, oldval) {
        if (oldval !== undefined) {

        }
    }

    _updateConfig(newval, oldval) {
        //todo
    }

    _renderTree() {
        //todo
    }

    _renderElement(tag, data) { }

}
customElements.define(LasalRuntimeSigControlFilemanagerTree.is, LasalRuntimeSigControlFilemanagerTree);
