{#if _showLockPopUp}
  <div class="dialog-wrapper">
    <div class="dialog" ref:dialog>
      <div class="message">Digite a senha administrativa para continuar.</div>
      <input type="password" ref:password/>
      <table class="btns-wrapper">
        <td>
          <Button
            secondary
            bgColor={neutral700}
            width="100%"
            on:click="close()">
              Voltar
          </Button>
        </td>
        <td style="width: 4%;"></td>
        <td>
          <Button
            width="100%"
            on:click="auth()">
            Confirmar
          </Button>
        </td>
      </table>
    </div>
  </div>

  <KeyStroke key="enter" on:keystroke="auth()" />
{/if}


<script>
  import Merchant from '@mamba/pos/api/merchant.js';
  import Keyboard from '@mamba/keyboard/api/keyboard.js';

  export default {
    components: {
      Button: '@mamba/button/Button.html',
      KeyStroke: './Keystroke.html',
    },
    data() {
      return {
        _showLockPopUp: false,
        authError: true,
      };
    },
    methods: {
      open() {
        Keyboard.setKeyboardInputAsNumeric();
        this.set({ _showLockPopUp: true });
        this.refs.password.focus();
      },
      close() {
        this.set({ _showLockPopUp: false });
      },
      auth() {
        const success = Merchant.checkPassword(this.refs.password.value);

        this.fire('authentication', { success });

        if (success) {
          this.close();
          return;
        }

        this.refs.password.value = '';
        this.refs.dialog.classList.add('shaking');
        this.refs.password.classList.add('error');
        this.refs.password.focus();

        setTimeout(() => {
          this.refs.dialog.classList.remove('shaking');
          this.refs.password.classList.remove('error');
        }, 820);
      },
    },
  };
</script>


<style type="text/postcss">
  @import '@mamba/styles/settings.pcss';

  .dialog-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: $layer-dialog-fullscreen;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 70%);
    padding: 10px;
  }

  .dialog {
    padding: 14px;
    border-radius: 2px;
    background-color: $adminlock-background-color;
  }

  .dialog-wrapper :global(.shaking) {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  input {
    max-width: 100%;
    height: 44px;
    border: 2px solid transparent;
    border-radius: 3px;
    margin-bottom: 15px;
    padding: 20px;
    font-size: 26px;
    text-align: center;
    transition: border-color 0.3s ease;
  }

  .dialog-wrapper :global(input.error) {
    border-color: $adminlock-negative-color;
  }

  .message {
    margin-bottom: 15px;
    color: $adminlock-text-color;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
  }

  .btns-wrapper {
    table-layout: fixed;
    width: 100%;
  }

  @keyframes shake {
    10%,
    90% {
      transform: translateX(-1px);
    }

    20%,
    80% {
      transform: translateX(2px);
    }

    30%,
    50%,
    70% {
      transform: translateX(-4px);
    }

    40%,
    60% {
      transform: translate(4px);
    }
  }
</style>