<link rel="import" href="../../styles/shared.html">
<link rel="import" href="../base/base.html">
<link rel="import" href="../locale/locale.html">
<link rel="import" href="dialog.html">

<dom-module id="pl-dialog-confirm">

    <template>
        <style include="shared"></style>

        <pl-dialog open="{{ open }}" prevent-dismiss>
            <div class="message tiles-1">{{ message }}</div>
            <button class="tap tiles-2" on-click="_confirm">{{ confirmLabel }}</button>
            <button class="tap tiles-3" on-click="_cancel">{{ cancelLabel }}</button>
        </pl-dialog>
    </template>

    <script>
(() => {

const defaultMessage = $l("Are you sure you want to do this?");
const defaultConfirmLabel = $l("Confirm");
const defaultCancelLabel = $l("Cancel");

class DialogConfirm extends padlock.BaseElement {

    static get is() { return "pl-dialog-confirm"; }

    static get properties() { return {
        confirmLabel: { type: String, value: defaultConfirmLabel },
        cancelLabel: { type: String, value: defaultCancelLabel },
        message: { type: String, value: defaultMessage },
        open: { type: Boolean, value: false }
    }; }

    _confirm() {
        this.dispatchEvent(new CustomEvent("dialog-confirm", { bubbles: true, composed: true }));
        this.open = false;
        typeof (this._resolve === "function") && this._resolve(true);
        this._resolve = null;
    }

    _cancel() {
        this.dispatchEvent(new CustomEvent("dialog-cancel", { bubbles: true, composed: true }));
        this.open = false;
        typeof (this.resolve === "function") && this._resolve(false);
        this._resolve = null;
    }

    confirm(message, confirmLabel, cancelLabel) {
        this.message = message || defaultMessage;
        this.confirmLabel = confirmLabel || defaultConfirmLabel;
        this.cancelLabel = cancelLabel || defaultCancelLabel;
        this.open = true;

        return new Promise((resolve) => {
            this._resolve = resolve;
        });
    }
}

window.customElements.define(DialogConfirm.is, DialogConfirm);

})();
    </script>

</dom-module>
