<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-badge/paper-badge.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">

<link rel="import" href="../../bower_components/strolch-wc-badge/strolch-wc-badge.html">
<link rel="import" href="../../bower_components/strolch-wc-styles/strolch-wc-styles.html">

<link rel="import" href="../styles/c-app-style.html">

<link rel="import" href="../widgets/c-demo-location-detail.html">

<dom-module id="c-demo-locations">
    <template>

        <style is="custom-style" include="c-app-style">
            :host {
                display: block;
                padding: 10px 10px;
            }

            paper-card {
                margin: 0;
            }

            c-demo-location-detail {
                margin-bottom: 10px;
            }
        </style>

        <h1>Demo actions to test UI</h1>

        <div class="actions">
            <div>
                <paper-button on-tap="onShowBooks" raised>Show Books</paper-button>
                <paper-button raised on-tap="_showNotification">Show Notification</paper-button>
                <paper-button raised on-tap="_showInfo">Show Info</paper-button>
            </div>

            <div>
                <paper-button raised on-tap="_showConfirmation">Show Confirmation</paper-button>
            </div>

            <div>
                <paper-button id="showToast" raised on-tap="_showToast">Show Toast</paper-button>
                <strolch-wc-badge hide="[[arrayEmpty(selectedRows)]]" label="[[selectedRows.length]]" for="showToast"></strolch-wc-badge>
                <paper-toggle-button>[[localize('Toggle')]]</paper-toggle-button>
                <paper-icon-button icon="refresh" on-tap="reload"></paper-icon-button>
            </div>
        </div>

        <p>Current search criteria:
            <template is="dom-if" if="[[isEmptyString(searchTerm)]]"><i>empty</i></template>
            <template is="dom-if" if="[[isNotEmptyString(searchTerm)]]">[[searchTerm]]
                <paper-icon-button icon="clear" on-tap="clearSearchTerm"></paper-icon-button>
            </template>
        </p>

        <template is="dom-if" if="[[arrayFilled(rows)]]">
            <template is="dom-repeat" items="[[rows]]" as="row">
                <c-demo-location-detail data="[[row]]" on-data-selected="onRowSelected" on-remove-location="onRemoveLocation"></c-demo-location-detail>
            </template>
        </template>
        <template is="dom-if" if="[[!arrayFilled(rows)]]">
            <p class="g-center"><i>[[localize('noElementsAvailable')]]</i></p>
        </template>

        <strolch-wc-paging id="paging" data-obj="[[dataObj]]" has-content show-set-limit hidden$="[[!arrayFilled(rows)]]"></strolch-wc-paging>

        <iron-ajax id="ajaxGetLocations"
                   url="[[baseRestPath]]/locations?query=[[searchTerm]]"
                   content-type="application/json"
                   params=""
                   handle-as="json"
                   method="GET"
                   on-response="onGetLocationsResponse"
                   on-error="onRequestError"></iron-ajax>
        <iron-ajax id="ajaxRemoveLocation"
                   content-type="application/json"
                   handle-as="json"
                   method="DELETE"
                   on-response="onRemoveLocationResponse"
                   on-error="onRequestError"></iron-ajax>
    </template>

    <script>
        Polymer({
            is: 'c-demo-locations',

            behaviors: [
                CustomComponentBehavior
            ],

            properties: {
                toolbarConfig: {
                    type: Object,
                    readOnly: true,
                    value: {
                        hasSearchTerm: true
                    }
                },
                searchTerm: {
                    type: String,
                    observer: "searchTermChanged"
                },
                selectedRows: {
                    type: Array,
                    value: []
                },
                dataObj: {
                    type: Object,
                    value: null
                },
                rows: {
                    type: Array,
                    value: []
                }
            },

            searchTermChanged: function (newValue, oldValue) {
                if (newValue != null && oldValue !== undefined)
                    this.reload();
            },

            onShowBooks : function () {
                this.changePage("demo-books");
            },

            _showNotification: function (e) {
                this.showNotification("notification-one", //
                    "This is a notification!", //
                    "fa-exclamation-triangle", //
                    "Close", function () {
                        this.clearNotification("notification-one");
                    });
            },
            _showInfo: function (e) {
                this.showDialog("This is an info dialog!", false);
            },
            _showConfirmation: function (e) {
                this.showInfo({
                    title: "Confirmation",
                    line1: "This is a confirmation dialog. Do you want to confirm?",
                    callback: function (confirmed) {
                        this.async(function () {
                            if (confirmed) {
                                this.showDialog("You confirmed the dialog", false);
                                return;
                            }

                            this.showNotification("notification-two", //
                                "You did not confirm the dialog", "fa-exclamation-triangle", //
                                "Cancel", function () {
                                    this.clearNotification("notification-two");
                                }.bind(this), //
                                "Close", function () {
                                    this.clearNotification("notification-two");
                                }.bind(this), //
                                "Info", function () {
                                    this._showInfo();
                                }.bind(this));
                        });
                    }.bind(this)
                });
            },
            _showToast: function (e) {
                this.showToast("This is a toast!");
            },

            /* Private */
            onRowSelected: function (e) {
                if (e.detail.data.checked) {
                    this.push('selectedRows', e.detail.data);
                } else {
                    this.arrayDelete('selectedRows', e.detail.data);
                }
            },
            onRemoveLocation: function (e) {
                var location = e.detail.location;
                this.showInfo({
                    title: "Remove location",
                    line1: "Do you really want to remove location " + location.name,
                    callback: function (confirmed) {
                        this.async(function () {
                            if (!confirmed) return;
                            this.$.ajaxRemoveLocation.url = this.baseRestPath + "/locations/" + location.id;
                            this.$.ajaxRemoveLocation.generateRequest();
                        });
                    }.bind(this)
                });
            },

            /* Public */
            reload: function () {
                this.$.ajaxGetLocations.generateRequest();
            },

            onGetLocationsResponse: function (e) {
                this.selectedRows = [];
                var response = e.detail.response;
                response.data.forEach(function (location) {
                    location.selectable = true;
                });
                this.rows = response.data;
                this.dataObj = response;
            },
            onRemoveLocationResponse: function (e) {
                this.reload();
            },

            /* Lifecycle */
            attached: function () {
                this.$.ajaxGetLocations.params.limit = 20;
                this.$.paging.ajax = this.$.ajaxGetLocations;
            },
            ready: function () {

            },
        });
    </script>
</dom-module>