<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../imgp-components/imgp-notifier-mixin.html">

<link rel="import" href="shared-styles/shared-styles.html">
<link rel="import" href="section-tab.html">

<link rel="import" href="shared-components-mixin.html">
<link rel="import" href="../imgp-commons/mustache.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<dom-module id="list-view">
    <template>
        <style include='shared-styles'>
            :host {
                display: block
            }

            .wrapper__scroll {
                overflow-y: scroll;
                display: grid;
                grid-auto-rows: 1fr;
                grid-gap: 1em;
                padding: 1em;
            }

            .wrapper__scroll--columns1 {
                grid-template-columns: repeat(1, 1fr);
            }

            .wrapper__scroll--columns2 {
                grid-template-columns: repeat(2, 1fr);
            }

            .wrapper__scroll--columns3 {
                grid-template-columns: repeat(3, 1fr);
            }



            .item--view {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 0.6em;
            }

            .item--view>p {
                margin: 0;
            }

            .wrapper__action-buttons {
                justify-self: flex-end;
                align-self: flex-start;
            }

            paper-icon-button:focus {
                background-color: rgba(28, 45, 14, 0.12);
                border-radius: 50%;
            }

        </style>


        <!-- <template is="dom-if" if="{{document.length}}" restamp> -->
        <!-- <h3>Lista podmiotów związanych z umową</h3>
        <paper-item>PODMIOT</paper-item> -->
        <div class$="wrapper__scroll [[_changeNumberOfColumns(columns)]]">
            <template is="dom-repeat" items="{{list}}" as="item" indexAs="index">
                <!-- <div class="wrapper__icons-value"> -->
        </div>
        <div id="innanazwa">
            <div class="item--view" inner-h-t-m-l="[[_getValue(item)]]"></div>
            <div class="wrapper__action-buttons">
                <template is="dom-repeat" items="{{actions}}" as="action">
                    <paper-icon-button data-item="[[item]]" id="[[action.id]]" id$="_addHighLight[[index]]"
                        icon="[[action.icon]]" alt="[[action.alt]]"></paper-icon-button>
                </template>
            </div>
        </div>
    </template>
    </div>
    <!-- </template> -->

    </template>

    <script>

        /**
         * `list-view` Description
         *
         * @summary ShortDescription.
         * @customElement
         * @polymer
         * @extends {Polymer.Element}
         */
        class ListView extends GP.SharedComponentsMixin(GP.ImgpNotifierMixin(Polymer.Element)) {

            /**
             * String providing the tag name to register the element under.
             */
            static get is() {
                return 'list-view';
            }

            /**
             * Object describing property-related metadata used by Polymer features
             */
            static get properties() {
                return {
                    dictionary: {
                        type: Object,
                        notify: true,
                    },
                    list: {
                        type: Array,
                        notify: true,
                    },
                    template: {
                        type: Array,
                        notify: true,
                        value: "<p>{{{key}}}:&nbsp;<strong>{{{value}}}&nbsp;</strong></p>"
                    },
                    actions: {
                        type: Array,
                        notify: true,
                    },
                    columns: {
                        type: Number,
                        notify: true,
                    },
                    tapStatus: {
                        type: String,
                        notify: true,
                    }

                };
            }

            _getValue(item) {
                let x = '';
                // if (Object.keys(this.dictionary).length != 2) console.warn("list-view parametr dicionary został niepoprawnie zadeklarowany")
                Object.keys(this.dictionary).forEach(k => {
                    if (!this.dictionary[k].noShowEmptyValue) {
                        if (this.dictionary[k].label) {
                            x += this._displayList(this.dictionary[k].label, item.attributes[k])
                        } else {
                            x += this._displayList(this.dictionary[k], item.attributes[k])
                        }
                    } else {
                        if (item.attributes[k]) {
                            if (this.dictionary[k].label) {
                                x += this._displayList(this.dictionary[k].label, item.attributes[k])
                            } else {
                                x += this._displayList(this.dictionary[k], item.attributes[k])
                            }
                        }
                    }
                })
                return x;
            }

            _displayList(key, value) {
                return Mustache.render(this.template, { key, value });
            }

            _actionChanged(e) {
                this.dispatchEvent(new CustomEvent("action-changed", { detail: { index: e.model.index, item: this.list[e.model.index], action: e.model.action.id } }));
            }

            _changeNumberOfColumns(columns) {
                if (this.columns >= 1) {
                    return `wrapper__scroll--columns${this.columns}`
                }
            }

            /**
             * Use for one-time configuration of your component after local DOM is initialized.
             */
            ready() {
                super.ready();
                super.connectedCallback();

                Polymer.RenderStatus.afterNextRender(this, function () {


                });
            }

            _changeNumberOfColumns(columns) {
                if (this.columns >= 1) {
                    return `wrapper__scroll--columns${this.columns}`
                }
            }

        }

        window.customElements.define(ListView.is, ListView);
    </script>
</dom-module>