<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/file-upload/file-upload.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-runner-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-down-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-up-animation.html">
<link rel="import" href="my-animatable.html">
<dom-module id="my-qrcodescanner">
    <template>
        <style>
        :host {
            display: block;
            padding: 10px;
        }

        .card {
            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);
            padding: 16px;
            margin: 24px;
            border-radius: 5px;
            background-color: #fff;
            color: #757575;
        }

        .circle {
            display: inline-block;
            height: 64px;
            width: 64px;
            border-radius: 50%;
            background: #ddd;
            line-height: 64px;
            font-size: 30px;
            color: #555;
            text-align: center;
        }

        h1 {
            font-size: 22px;
            margin: 16px 0;
            color: #212121;
        }
        </style>
        <div class="card">
            <div class="circle">5</div>
            <h1>QR codes</h1>
            <iron-collapse opened="{{!isDisabled}}">
                <file-upload hide-fileList  raised name="qrscan" id="qrscan" method="POST" accept="image/*;capture=camera" target="/qrscan">Upload qr code
                </file-upload>
            </iron-collapse>

            <paper-button raised onclick="dialog.open()">plain dialog</paper-button>

            <paper-dialog id="dialog">
                <div id="rect" style="width:100px;height:100px;background-color:red"></div>
                <h1>essai</h1>
                <h1>essai</h1>
                <button on-click="move" raised>Move above rectangle</button>
                <h1>essai</h1>
                <div id="fin">fin</div>
            </paper-dialog>

            <iron-collapse id="qrInvalid">
                <div>{{poiincorrectMessage}}</div>
                <paper-button on-click="retry">Retry</paper-button>
            </iron-collapse>
            <iron-collapse id="qrValid">
                <div>{{poireachedMessage}}</div>
                <paper-button on-click="next">Next</paper-button>
            </iron-collapse>
        </div>
    </template>
    <script>
    Polymer({


        is: 'my-qrcodescanner',
        ready: function() {
            this.$.qrscan.addEventListener('success', this.qrscanListener.bind(this))
            this.isDisabled = false
            console.log(this.poi)
        },
        qrscanListener: function(item) {
            if (item && item.detail && item.detail.xhr && item.detail.xhr.response) {
                var code = item.detail.xhr.response
                var pass = code == '[' + this.poi._id + ']'
                if (!pass) {
                    this.$.qrInvalid.show()
                    this.isDisabled = true
                } else {
                    this.$.qrValid.show()
                    this.isDisabled = true
                }
            }
        },
        retry: function() {
            this.$.qrInvalid.hide()
            this.$.qrValid.hide()
            this.isDisabled = false
        },
        _poiObserver: function(item) {
            console.log(item)
        },

        property: {
            poi: {
                type: Object,
                notify: true,
                obersver: '_poiObserver',
            },
            poiincorrectMessage: {
                type: String,
                notify: true,
            },
            poireachedMessage: {
                type: String,
                notify: true,
            },
        },

        move: function () {
            this.playAnimation('move');
        },

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