<i18n>
{
  "en": {
    "SIGN_IN": "SIGN IN",
    "SIGN_UP": "SIGN UP",
    "LOGIN": "LOGIN",
    "PASSWORD": "PASSWORD",
    "KEEP_ME_SIGNED_IN": "KEEP ME SIGNED IN",
    "EMAIL": "EMAIL",
    "CONFIRM_PASSWORD": "CONFIRM PASSWORD",
    "Forgot_your_password?": "Forgot your password?",
    "RESTORE": "RESTORE",
    "SEND": "SEND"
  },
  "ru": {
    "SIGN_IN": "ВОЙТИ",
    "SIGN_UP": "РЕГИСТРАЦИЯ",
    "LOGIN": "ЛОГИН",
    "PASSWORD": "ПАРОЛЬ",
    "KEEP_ME_SIGNED_IN": "ЗАПОМНИТЬ МЕНЯ",
    "EMAIL": "EMAIL",
    "CONFIRM_PASSWORD": "ПОДТВЕРДИТЬ ПАРОЛЬ",
    "Forgot_your_password?": "Забыли пароль?",
    "RESTORE": "ВОСТАНОВИТЬ",
    "SEND": "ОТПРАВИТЬ"
  }
}
</i18n>

<template>
  <div class="frame">
    <div class="nav">
      <label>
        <input
          type="radio"
          name="auth"
          @change="page = 0"
          v-bind:checked="page == 0"
        />
        <span>
          {{ $t("SIGN_IN") }}
        </span>
      </label>
      <label>
        <input
          type="radio"
          name="auth"
          @change="page = 1"
          v-bind:checked="page == 1"
        />
        <span>
          {{ $t("SIGN_UP") }}
        </span>
      </label>
      <label v-bind:style="page == 2 ? { opacity: 1 } : { opacity: 0 }">
        <input
          type="radio"
          name="auth"
          v-bind:checked="page == 2"
          v-bind:disabled="page != 2"
        />
        <span>
          {{ $t("RESTORE") }}
        </span>
      </label>
    </div>
    <div class="body">
      <div class="signin" v-swipe="{ myPage: 0, curentPage: page }">
        <div class="body__block">
          <div class="body__text">{{ $t("LOGIN") }}</div>
          <input type="text" class="body__input" />
        </div>
        <div class="body__block">
          <div class="body__text">{{ $t("PASSWORD") }}</div>
          <input type="password" class="body__input" minlength="8" />
        </div>
        <div class="keepme body__block">
          <label class="keepme__check">
            <input type="checkbox" />
            <span></span>
          </label>
          <span>{{ $t("KEEP_ME_SIGNED_IN") }}</span>
        </div>
        <button class="body__submit body__block">{{ $t("LOGIN") }}</button>
        <hr class="body__block" />
        <button class="forgot body__block" @click="page = 2">
          {{ $t("Forgot_your_password?") }}
        </button>
      </div>
      <div class="signup" v-swipe="{ myPage: 1, curentPage: page }">
        <div class="body__block">
          <div class="body__text">{{ $t("LOGIN") }}</div>
          <input type="text" class="body__input" />
        </div>
        <div class="body__block">
          <div class="body__text">{{ $t("EMAIL") }}</div>
          <input type="email" class="body__input" />
        </div>
        <div class="body__block">
          <div class="body__text">{{ $t("PASSWORD") }}</div>
          <input type="password" class="body__input" minlength="8" />
        </div>
        <div class="body__block">
          <div class="body__text">{{ $t("CONFIRM_PASSWORD") }}</div>
          <input type="password" class="body__input" minlength="8" />
        </div>
        <button class="body__submit body__block">{{ $t("SIGN_UP") }}</button>
      </div>
      <div class="restore" v-swipe="{ myPage: 2, curentPage: page }">
        <div class="body__block">
          <div class="body__text">{{ $t("EMAIL") }}</div>
          <input type="text" class="body__input" />
        </div>
        <button class="body__submit body__block">
          {{ $t("SEND") }} {{ $t("PASSWORD") }}
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: OpenSans;
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
    url("../assets/fonts/OpenSans/OpenSans-Regular.ttf");
}

$transition-slow: 0.5s;
$transition-fast: 0.25s;

* {
  box-sizing: border-box;
}
.frame {
  width: 50vmin; //! удалить и переделать на Authorization
  //transition: width $transition-slow ease;

  display: flex;
  flex-direction: column;
  font-family: OpenSans;
  border-radius: 0.75vmin;
  background: linear-gradient(rgba(35, 43, 85, 0.75), rgba(35, 43, 85, 0.95));
  .nav {
    display: flex;
    padding: 0 5vmin;
    width: 100%;
    margin-top: 7vmin;

    label {
      font-size: 2.5vmin;
      margin: 0 1vmin;
      transition: opacity $transition-fast ease;
    }
    input {
      display: none;
    }
    input + span {
      cursor: pointer;
      transition: padding $transition-fast ease, color $transition-fast ease;
      color: rgba(255, 255, 255, 0.3);
    }
    input:checked + span {
      border-bottom: solid 0.3vmin #1059ff;
      padding-bottom: 1.25vmin;
      color: white;
    }
  }
  .body {
    display: flex;

    margin-top: 7vmin;
    width: 100%;
    transition: height $transition-slow ease;
    position: relative;

    height: 0;
    overflow: hidden;

    & > div {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      transition: opacity $transition-slow ease, left $transition-slow ease;
      width: 100%;
      padding: 0 5vmin;
      position: absolute;

      opacity: 0;
    }

    &__block {
      margin: 0 0 2vmin 0;
    }
    &__text {
      font-weight: 400;
      font-size: 1.75vmin;
      color: rgba(255, 255, 255, 0.7);
      margin-left: 2vmin;
      margin-bottom: 0.5vmin;
    }
    &__input {
      width: 100%;
      height: 4vmin;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2vmin;
      border: none;
      outline: none;
      padding: 1vmin 2vmin;
      color: white;
      font-size: 2vmin;

      display: flex;
      align-items: center;
    }
    &__submit {
      width: 100%;
      font-weight: 700;
      font-size: 1.75vmin;
      text-align: center;
      color: white;
      height: 4.5vmin;
      border: none;
      border-radius: 3vmin;
      outline: none;
      background-color: #1059ff;
      cursor: pointer;
    }
    .signin {
      .keepme {
        display: flex;
        align-items: center;
        font-size: 1.75vmin;
        color: rgba(255, 255, 255, 0.7);
        &__check {
          margin-right: 2vmin;
          $width: 8vmin;
          $heigth: 4vmin;
          $transition: 0.2s;
          $round: $heigth / 3;

          $padding: ($heigth - $round) /2;
          cursor: pointer;

          input {
            display: none;
          }
          * {
            box-sizing: border-box;
          }
          input + span {
            width: $width;
            height: $heigth;
            border-radius: $heigth/2;
            font-size: 1.75vmin;
            line-height: 1;
            transition: background-color $transition ease;

            position: relative;

            display: flex;
            align-items: center;
          }
          input + span:before {
            height: $round;
            width: $round;
            border-radius: 50%;
            transition: left $transition ease;
          }

          input:not(:checked) + span {
            background: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.7);
          }

          input:not(:checked) + span:before {
            content: "";
            position: absolute;
            left: $padding;
            background: rgba(255, 255, 255, 0.2);
          }

          input:not(:checked) + span:after {
            content: "NO";
            position: absolute;
            right: $padding;
          }

          input:checked + span {
            background: #0f4fe6;
            color: white;
          }

          input:checked + span::before {
            content: "";
            background: white;
            position: absolute;
            left: $width - $padding -$round;
          }

          input:checked + span::after {
            content: "YES";
            position: absolute;
            left: $padding;
          }
        }
      }
      hr {
        border: none;
        background: rgba(255, 255, 255, 0.16);
        width: 100%;
        height: 0.1vmin;
      }
      .forgot {
        color: rgba(255, 255, 255, 0.3);
        display: flex;
        margin-right: auto;
        margin-left: auto;
        outline: none;
        background: transparent;
        padding: 0;
        border: none;
        cursor: pointer;
        font-size: 1.75vmin;
      }
    }
  }
}
</style>

<script>
export default {
  name: "Auth",
  data() {
    return {
      page: 0,
    };
  },
  methods: {},
  mounted() {},
  directives: {
    swipe: {
      inserted(el, binding) {
        if (binding.value.myPage == binding.value.curentPage) {
          el.style.left = "0";
          el.style.opacity = "1";

          let width = document.documentElement.clientWidth;
          let height = document.documentElement.clientHeight;
          let minSide = height < width ? (minSide = height) : (minSide = width);
          el.parentElement.style.height =
            (100 * el.scrollHeight) / minSide + 7 + "vmin";
        } else {
          if (binding.value.myPage > binding.value.curentPage) {
            el.style.left = "100%";
            el.style.opacity = "0";
          }
          if (binding.value.myPage < binding.value.curentPage) {
            el.style.left = "-100%";
            el.style.opacity = "0";
          }
        }
      },
      updated: function pageUpdated(el, binding) {
        alert(el, binding);
      },
    },
  },
};
</script>