<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-input/iron-input.html">

<!--
An element providing a solution to no problem in particular.

Example:

    <acre-faq></acre-faq>

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="acre-faq">
    <template>
        <style include="iron-flex iron-flex-alignment" />
        <style>
            :host {
                display: block;
                box-sizing: border-box;
                font-family: 'Open Sans', sans-serif;
            }

            iron-icon {
                width: 50px;
                height: 70px;
                margin-top: -20px;
                margin-bottom: -20px;
                --iron-icon-fill-color: gray;
            }

            iron-icon:hover {
                fill: orange;
                cursor: pointer;
            }

            .search {
                width: 100%;
            }

            .search .input-search {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 10px 50%;
                border: 1px solid #dfdfdf;
                border-radius: .25em;
                display: block;
                font: 400 1em/1.5em sans-serif;
                padding: .5em 1.75em;
                width: 97%;
            }

            .input-search:focus {
                outline: black;
            }

            .question-container {
                margin-top: 20px;
            }

            .vote {
                text-align: center;
                margin: 10px;
                border-right: #CACACA solid 1px;
            }

            .answer {
                margin-left: 10px;
            }

            .question {
                color: #004CFF;
                font-weight: 500;
                margin-left: 10px;
            }

            .mark {
                width: 100px;
                font-weight: bold;
            }

            .author,
            .date {
                color: #797777
            }

            button {
                color: #fff;
                background-color: var(--acre-button-color, --accent-color);
                border-color: var(--acre-button-color, --accent-color);
                padding: 6px 12px;
                margin: 0;
                width: 100%;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                cursor: pointer;
                border: 1px solid transparent;
                text-align: center;
                border-radius: 1px;
            }

            button:hover {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            }
        </style>

        <div class="search">
            <div class="field">
                <input class="input-search" type="text" is="iron-input" on-change="_searchChanged" placeholder="Tem uma dúvida? busque por respostas"
                bind-value="{{searchText}}">
            </div>

            <template is="dom-repeat" items="{{questions}}" as="question">
                <!-- {{item}} and {{index}} can be used in this binding scope -->

                <div class="question-container layout horizontal">
                    <div class="vote layout center-justified">
                        <iron-icon icon="icons:arrow-drop-up" on-click="_faqUp"></iron-icon>
                        <span>{{question.votes}}</span></br>
                        <span>votes</span>
                        <iron-icon icon="icons:arrow-drop-down" on-click="_faqDown"></iron-icon>
                    </div>
                    <div class="question-answer">
                        <div class="layout horizontal">
                            <p class="mark">Question:</p>
                            <p class="question">[[question.question]]</p>
                        </div>
                        <div class="layout horizontal">
                            <p class="mark">Answers:</p>
                            <div class="answers flex">
                                <template is="dom-repeat" items="{{question.answers}}" as="answer">
                                    <div class="answer">
                                        <p>[[answer.answer]]</p>
                                        <p class="author">Por <span>[[answer.author]]</span> em <span>[[answer.date]]</span> </p>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <button on-click="_loadMore">Carregar mais items</button>
        </div>
    </template>

    <script>
Polymer({
    is: 'acre-faq',

    properties: {
        /**
         * `searchText`
         */
        searchText: {
            type: String,
            value: '',
            notify: true
        },

        /**
         * The list of questions with the answers
         *
         * @type {{votes: numer, question: string, answers : [{ answer: string, author: string, date: string }]}}
         */
        questions: {
            type: Object,
            value: function () {
                return []
            },
        },
    },

    // Element Lifecycle

    ready: function () {
        // `ready` is called after all elements have been configured, but
        // propagates bottom-up. This element's children are ready, but parents
        // are not.
        //
        // This is the point where you should make modifications to the DOM (when
        // necessary), or kick off any processes the element wants to perform.
    },

    attached: function () {

        // `attached` fires once the element and its parents have been inserted
        // into a document.
        //
        // This is a good place to perform any work related to your element's
        // visual state or active behavior (measuring sizes, beginning animations,
        // loading resources, etc).
    },

    detached: function () {
        // The analog to `attached`, `detached` fires when the element has been
        // removed from a document.
        //
        // Use this to clean up anything you did in `attached`.
    },

    // Element Behavior

    /**
     * The `acre-faq-up` event is fired whenever `up` is called.
     *
     * @event acre-faq-up
     * @detail {{item: question}}
     */
    _faqUp: function (e) {
        this.fire('acre-faq-up', { item: e.model.question });
    },

    /**
    * The `acre-faq-down` event is fired whenever `down` is called.
    *
    * @event acre-faq-down
    * @detail {{item: question}}
    */
    _faqDown: function (e) {
        this.fire('acre-faq-down', { item: e.model.question });
    },

    /**
    * The `acre-faq-load-more` event is fired whenever `load more` is called.
    *
    * @event acre-faq-load-more
    * @detail {{item: true}}
    */
    _loadMore: function (e) {
        this.fire('acre-faq-load-more');
    },

    /**
    * The `acre-faq-load-search` event is fired whenever `load search` is called.
    *
    * @event acre-faq-load-search
    * @detail {{search: true}}
    */
    _searchChanged: function (e) {
        this.fire('acre-faq-search', { search: this.searchText });
    }

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