<polymer-element name="jso-attribute-render-select-table"
                 attributes="displayProperty attributeManager defaultValue visualSet options">
    <template>
        <link rel="stylesheet" href="../../jso-style.css">
        <link rel="stylesheet" href="../../jso-panel.css">
        <link rel="stylesheet" href="../../core-list-table.css">
        <style>
            :host {
                display: block;
                position: absolute;
                box-sizing: border-box;
                background-color: #FFFFFF;

                top: 0px;
                right: 320px;
                width: 500px;
                transition: all 0.2s;
            }

            .container {
                box-sizing: border-box;
                padding: 2px 5px 5px 5px;
            }

            .footer > * {
                margin-left: 5px;
            }

            #left {
                width: 165px;
                margin-right: 10px;
            }

            .selbox {
                box-sizing: border-box;
                overflow-y: auto;
                border: 1px solid #d3d3d3;
                background-color: #FFF;
            }

            .selitem {
                padding: 2px 5px;
            }

            .selitem[data-checked=true] {
                background-color: #ddd;
            }

            core-list {
                height: 175px;
                border: 1px solid #d3d3d3;
                border-top-width: 0;
                background-color: #FFFFFF;
            }
        </style>
        <datalist id="dl">
            <option value="asdf">asdf</option>
        </datalist>
        <div class="panel panel-shadow">
            <div class="header">
                <div class="text">{{displayProperty}} rendering configuration</div>
                <div class="headeractions" horizontal end-justified layout flex>
                    <div class="text headerclose" on-click="{{handleClose}}"></div>
                </div>
            </div>
            <div class="container" horizontal layout>
                <div id="left" vertical layout>

                    <label>Attribute name</label>

                    <div class="selbox" style="height: 100px;">
                        <template repeat="{{column in attributeManager.columns}}">
                            <div horizontal layout>
                                <div class="selitem" flex
                                     data-checked="{{ attributeName == column.name}}"
                                     data-name="{{column.name}}"
                                     on-click="{{handleAttributeNameSelect}}">
                                    {{column.title}}
                                </div>
                            </div>
                        </template>
                    </div>


                </div>
                <div vertical layout flex>
                    <label>Assign render values to attributes</label>

                    <div>
                        <div class="table-head" horizontal layout>
                            <div flex>Attribute value</div>
                            <div flex>Render value</div>
                        </div>
                        <core-list id="list" data="{{uniqueData}}" height="27">
                            <template>
                                <div horizontal layout class="table-row">
                                    <div flex>{{model.attribute}}</div>
                                    <select flex value="{{model.render}}">
                                        <template repeat="{{op in selectOptions}}">
                                            <option value="{{op}}">{{op}}</option>
                                        </template>
                                    </select>
                                </div>
                            </template>
                        </core-list>
                    </div>

                    <div horizontal layout style="margin-top:8px;">
                        <label>Edit default</label>
                        <!--<div class="button action">Select all</div>-->
                        <!--<div class="button action">Deselect all</div>-->
                        <!--<div class="text">Selection:</div>-->
                        <select flex value="{{defaultValue}}">
                            <template repeat="{{op in selectOptions}}">
                                <option value="{{op}}">{{op}}</option>
                            </template>
                        </select>
                    </div>

                </div>
            </div>
            <div class="footer" horizontal layout end-justified>
                <div class="button action" on-click="{{handleApplyDirect}}">Use attribute value directly</div>
                <div class="button action" style="width: 100px;" on-click="{{handleOk}}">OK</div>
            </div>
        </div>

    </template>
    <script>
        Polymer({
            created: function () {
                this.isReady = false;
                this.attributeName = '';
                this.attributeParse = 'string';

                this.uniqueData = [];
            },
            ready: function () {
                var me = this;
                this.selectOptions = this.options.split(",");
                var observer = new MutationObserver(function (mutations) {
                    me.$.list.updateSize();
                }.bind(this));
                observer.observe(this, {attributes: true, attributeFilter: ['hidden']});
            },
            domReady: function () {
                this.isReady = true;
            },
            defaultValueChanged: function (oldValue, newValue) {
                for (var i = 0; i < this.uniqueData.length; i++) {
                    var data = this.uniqueData[i];
                    if (data.render === oldValue) {
                        data.render = newValue;
                    }
                }
            },
            visualSetChanged: function (oldValue, newValue) {
                if (this.visualSet) {
                    this.attributeName = this.visualSet.attribute;
                    this.attributeParse = this.visualSet.parse;
                    this.uniqueMatches = this.visualSet.matches;
                }
            },
            attributeNameChanged: function (oldValue, newValue) {
                this._updateUniqueValues();
            },
            /* Observers */
            observe: {
                'attributeManager.data': 'handleAttributeManagerChange'
            },
            handleAttributeManagerChange: function (oldValue, newValue) {
                this._updateUniqueValues();
                if (this.isReady && this.visualSet && this.visualSet.enabled) {
                    this._updateVisualSet();
                    this.fire('ok', {displayProperty: this.getAttribute("id")});
                }
            },

            handleClose: function () {
                this.displayProperty = null;
            },
            handleOk: function () {
                this._updateVisualSet();
                this.fire('ok', {displayProperty: this.displayProperty});
                this.handleClose();
            },
            _updateVisualSet: function () {
                if (this.attributeName != '') {
                    this.uniqueMatches = {};
                    for (var i = 0; i < this.uniqueData.length; i++) {
                        var data = this.uniqueData[i];
                        this.uniqueMatches[data.attribute] = data.render;
                    }
                    this.visualSet = {
                        attribute: this.attributeName,
                        displayProperty: this.displayProperty,
                        matches: this.uniqueMatches,
                        parse: this.attributeParse,
                        enabled: true
                    }
                }
            },
            handleAttributeNameSelect: function (e) {
                this.attributeName = e.currentTarget.dataset.name;
            },
            _updateUniqueValues: function () {
                var uniqueMap = {};
                var uniqueData = [];
                for (var i = 0, l = this.attributeManager.data.length; i < l; i++) {
                    var row = this.attributeManager.data[i];
                    if (!uniqueMap[row[this.attributeName]]) {
                        uniqueMap[row[this.attributeName]] = true;

                        var render = this.defaultValue;
                        if (this.visualSet && this.visualSet.attribute == this.attributeName) {
                            if (this.visualSet.matches[row[this.attributeName]] != null) {
                                render = this.visualSet.matches[row[this.attributeName]];
                            }
                        }
//                        if (this.visualSet) {
//                            render = this.visualSet.matches[row[this.attributeName]];
//                        }
                        if (row[this.attributeName]) {
                            uniqueData.push({attribute: row[this.attributeName], render: render});
                        }
                    }
                }
                uniqueData.sort(function (a, b) {
                    return a.attribute.localeCompare(b.attribute);
                });
                this.uniqueData = uniqueData;
            },
            handleApplyDirect: function () {
                for (var i = 0; i < this.uniqueData.length; i++) {
                    var data = this.uniqueData[i];
                    data.render = data.attribute;
                }
            }
        });
    </script>
</polymer-element>