<template>
  <div class="login">
    <div class="container">
      <img class="logo mb-4" src="@/assets/zilliqa-logo.png" />

      <h1 class="title">
        Login to Zilliqa
        <br />multisig wallet
      </h1>

      <div class="actions-container">
        <div class="button d-flex flex-column" @click="loginWithKeystore">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22.604"
            height="29.134"
            viewBox="0 0 22.604 29.134"
          >
            <g id="json-file" transform="translate(-6.5)">
              <path
                id="Path_22"
                data-name="Path 22"
                d="M31.515,45.553a1.055,1.055,0,0,0-.4-.337,1.107,1.107,0,0,0-.471-.1,1.241,1.241,0,0,0-.484.1,1.037,1.037,0,0,0-.412.326,1.684,1.684,0,0,0-.285.594,3.479,3.479,0,0,0-.11.893,3.549,3.549,0,0,0,.106.879,1.722,1.722,0,0,0,.275.594,1.1,1.1,0,0,0,.4.337,1.074,1.074,0,0,0,.471.106,1.209,1.209,0,0,0,.484-.1,1.079,1.079,0,0,0,.412-.326,1.646,1.646,0,0,0,.285-.594,3.546,3.546,0,0,0,.11-.9,3.5,3.5,0,0,0-.106-.876A1.762,1.762,0,0,0,31.515,45.553Z"
                transform="translate(-11.375 -22.453)"
                fill="#c9e2ff"
              />
              <path
                id="Path_23"
                data-name="Path 23"
                d="M29.1,19.59V7.021a1.16,1.16,0,0,0-.276-.9L22.982.276A.95.95,0,0,0,22.315,0H7.737A1.3,1.3,0,0,0,6.5,1.47V19.59ZM18.053,16.576a.5.5,0,1,1-1,0V15.069a.5.5,0,1,1,1,0ZM22.071,1.7a.258.258,0,0,1,.441-.182l5.071,5.071a.258.258,0,0,1-.182.441H22.071Zm-.5,10.352V10.046a.5.5,0,0,0-.5-.5.5.5,0,0,1,0-1,1.509,1.509,0,0,1,1.507,1.507v2.009a1.006,1.006,0,0,0,1,1,.5.5,0,1,1,0,1,1.006,1.006,0,0,0-1,1v2.009a1.509,1.509,0,0,1-1.507,1.507.5.5,0,0,1,0-1,.5.5,0,0,0,.5-.5V15.069a2,2,0,0,1,.694-1.507A2,2,0,0,1,21.569,12.055Zm-4.018-1a.753.753,0,1,1-.753.753A.754.754,0,0,1,17.551,11.051ZM11.523,13.06a1.006,1.006,0,0,0,1-1V10.046a1.509,1.509,0,0,1,1.507-1.507.5.5,0,1,1,0,1,.5.5,0,0,0-.5.5v2.009a2,2,0,0,1-.694,1.507,2,2,0,0,1,.694,1.507v2.009a.5.5,0,0,0,.5.5.5.5,0,1,1,0,1,1.509,1.509,0,0,1-1.507-1.507V15.069a1.006,1.006,0,0,0-1-1,.5.5,0,1,1,0-1Z"
                fill="#c9e2ff"
              />
              <path
                id="Path_24"
                data-name="Path 24"
                d="M6.5,41v7.535a1.218,1.218,0,0,0,1.237,1H27.867a1.218,1.218,0,0,0,1.237-1V41Zm5.787,5.307a1.26,1.26,0,0,1-.131.6,1.071,1.071,0,0,1-.35.391,1.4,1.4,0,0,1-.5.206,2.936,2.936,0,0,1-.587.058,2.387,2.387,0,0,1-.354-.031,3.021,3.021,0,0,1-.419-.1q-.216-.066-.415-.148A1.541,1.541,0,0,1,9.19,47.1l.35-.556a1.026,1.026,0,0,0,.2.1q.127.051.278.1t.316.079a1.5,1.5,0,0,0,.309.034,1.055,1.055,0,0,0,.58-.141.556.556,0,0,0,.23-.477V42.365h.838Zm3.987.368a1.381,1.381,0,0,1-.319.453,1.531,1.531,0,0,1-.508.312,1.894,1.894,0,0,1-.687.117c-.11,0-.223-.006-.34-.017a2.759,2.759,0,0,1-.354-.058,1.851,1.851,0,0,1-.34-.114,1.1,1.1,0,0,1-.278-.175l.144-.591a1.466,1.466,0,0,0,.244.106c.1.034.2.066.305.1s.21.054.316.072a1.7,1.7,0,0,0,.3.028.943.943,0,0,0,.642-.2.731.731,0,0,0,.223-.58.554.554,0,0,0-.158-.4,1.71,1.71,0,0,0-.395-.3q-.237-.134-.512-.268a3.122,3.122,0,0,1-.515-.316,1.648,1.648,0,0,1-.4-.429,1.124,1.124,0,0,1-.158-.618,1.38,1.38,0,0,1,.124-.6,1.336,1.336,0,0,1,.333-.443,1.474,1.474,0,0,1,.488-.278,1.779,1.779,0,0,1,.587-.1,3.6,3.6,0,0,1,.638.058,1.407,1.407,0,0,1,.522.189c-.028.059-.059.125-.1.2l-.1.2c-.032.062-.059.114-.082.155a.635.635,0,0,1-.041.069.83.83,0,0,1-.093-.055.7.7,0,0,0-.148-.069,1.054,1.054,0,0,0-.254-.048,2.4,2.4,0,0,0-.405.007.709.709,0,0,0-.261.079.9.9,0,0,0-.22.161.736.736,0,0,0-.151.216.554.554,0,0,0-.055.23.621.621,0,0,0,.158.443,1.548,1.548,0,0,0,.391.3q.233.127.508.247a2.756,2.756,0,0,1,.512.292,1.475,1.475,0,0,1,.395.429,1.248,1.248,0,0,1,.158.663A1.278,1.278,0,0,1,16.274,46.675ZM21.2,46.1a2.3,2.3,0,0,1-.447.81,1.874,1.874,0,0,1-.666.488,2.195,2.195,0,0,1-1.669,0,1.868,1.868,0,0,1-.666-.488,2.3,2.3,0,0,1-.447-.81,4,4,0,0,1,0-2.249,2.3,2.3,0,0,1,.447-.807,1.915,1.915,0,0,1,.666-.491,2.152,2.152,0,0,1,1.669,0,1.909,1.909,0,0,1,.666.491,2.306,2.306,0,0,1,.447.807,4,4,0,0,1,0,2.249ZM26.18,47.53h-.838l-1.985-3.489V47.53H22.52V42.469h.838l1.985,3.489V42.469h.838Z"
                transform="translate(0 -20.406)"
                fill="#c9e2ff"
              />
            </g>
          </svg>

          Keystore
        </div>
        <div class="button d-flex flex-column" @click="loginWithLedger">
          <svg
            id="squares_1_"
            xmlns="http://www.w3.org/2000/svg"
            width="28.075"
            height="28.167"
            viewBox="0 0 28.075 28.167"
          >
            <path
              id="Path_21"
              data-name="Path 21"
              d="M23.64,0H10.683V17.387H28.07V4.522A4.51,4.51,0,0,0,23.64,0ZM6.7,0H4.533A4.544,4.544,0,0,0,0,4.533V6.7H6.7ZM0,10.775H6.7v6.7H0ZM21.371,28.162h2.171a4.544,4.544,0,0,0,4.533-4.533V21.463h-6.7v6.7Zm-10.688-6.7h6.7v6.7h-6.7ZM0,21.463v2.171a4.544,4.544,0,0,0,4.533,4.533H6.7v-6.7Z"
              fill="#c9e2ff"
            />
          </svg>

          Ledger
        </div>
        <div class="button d-flex flex-column" @click="loginWithZilPay">
          <svg width="28" height="28" viewBox="0 0 119 119" fill="none">
            <path
              d="M54.8044 118.88C35.5229 116.954 18.0428 106.795 8.6187 92.0385C4.77392 86.0182 1.8034 78.4155 0.868392 72.2024C0.449075 69.4161 0.163062 62.9238 0.295478 59.1977C0.774583 45.7157 3.91713 35.2597 10.2733 25.9989C12.4988 22.7565 13.9525 21.0561 17.082 18.0348C22.0836 13.2061 27.1142 9.79618 34.2435 6.40209C40.6048 3.37361 45.7741 1.7943 52.4994 0.824661C55.9276 0.330375 63.7542 0.379095 67.3241 0.9168C78.7194 2.63365 88.7475 7.51848 98.3135 16.0122C108.524 25.0786 115.294 35.6673 117.765 46.4361C118.693 50.4816 118.859 52.0776 118.87 57.0499C118.881 62.0905 118.751 63.4743 117.848 67.9755L117.271 70.8475L115.128 71.2639C109.268 72.4018 101.765 74.4388 97.0327 76.1761C93.3814 77.5166 92.6403 77.8196 87.3515 80.1354C82.279 82.3565 79.9803 83.2346 77.2312 84.0015C71.4855 85.6042 65.3512 85.7401 61.2071 84.3563C55.6298 82.494 51.4583 78.0425 50.5507 72.9847C50.246 71.2862 50.4285 67.9763 50.9251 66.1973C52.12 61.9164 54.7617 57.5064 58.8549 52.9593C59.6121 52.1182 60.2478 51.4462 60.2676 51.466C60.2869 51.4847 60.532 53.314 60.8112 55.5287C61.0905 57.7435 61.3324 59.5751 61.3489 59.5991C61.3655 59.6232 62.0771 59.3952 62.9305 59.0931C67.9285 57.3228 73.0797 56.9975 78.3197 58.1213C80.8832 58.6711 85.6104 60.1652 90.2098 61.8795C91.9846 62.541 93.9762 63.1934 94.6354 63.3292C97.7773 63.9764 102.911 63.3373 106.183 61.8925C107.075 61.4986 107.142 61.4216 107.38 60.5154C107.702 59.288 107.706 55.7975 107.385 54.252L107.14 53.0648L103.515 50.6474C81.6789 36.086 63.3596 27.458 47.7899 24.4022C43.5557 23.5712 36.1786 22.8583 36.1786 23.2801C36.1786 23.3813 36.1341 23.5763 36.0798 23.7136C36.0083 23.8946 38.1354 24.9929 43.8206 27.7103C48.1323 29.7712 51.6617 31.4976 51.6635 31.5468C51.6656 31.5961 50.1528 32.148 48.3022 32.7733C43.0298 34.5549 39.4958 35.963 35.9005 37.7144C32.9267 39.1631 28.6228 41.6641 28.6193 41.9455C28.6185 42.0049 30.2288 42.2002 32.1976 42.3798L35.7773 42.7063L33.8093 44.7775C31.1559 47.57 29.6195 49.3579 25.878 54.0075L22.7097 57.9448L25.4794 57.9941C27.0028 58.0211 28.2474 58.1017 28.2452 58.173C28.2431 58.2442 26.9642 62.5307 25.4033 67.6984C23.8424 72.8662 22.581 77.11 22.6003 77.1292C22.6195 77.1479 23.9507 76.8787 25.5585 76.5302C27.4607 76.1177 28.5228 75.9606 28.5991 76.0804C28.6636 76.1816 28.9956 80.3572 29.3369 85.3594C29.6782 90.3616 29.9841 94.4841 30.0167 94.5205C30.0493 94.5569 31.2082 93.6509 32.592 92.5071C33.9758 91.3633 35.1622 90.4282 35.2284 90.429C35.2945 90.4295 37.5891 93.8083 40.3275 97.9367C43.0659 102.065 45.3662 105.447 45.4393 105.452C45.5124 105.457 46.5829 104.288 47.8182 102.854C49.6155 100.769 50.108 100.295 50.2831 100.483C50.4034 100.613 51.323 101.725 52.3264 102.955C53.3298 104.186 55.1067 106.129 56.2749 107.275L58.399 109.357L62.9169 109.36C69.9368 109.366 74.3877 110.093 80.2998 112.203L82.1007 112.846L81.4985 113.286C77.9449 115.879 73.4395 117.595 67.7114 118.538C65.9061 118.836 64.4268 118.931 60.8885 118.977C58.4036 119.01 55.6652 118.967 54.8032 118.88L54.8044 118.88Z"
              fill="#c9e2ff"
            />
          </svg>
          ZilPay
        </div>
      </div>

      <div class="info-container">
        <div class="info-item mr-5" @click="openVideo">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32.334"
            height="32.333"
            viewBox="0 0 27.334 27.333"
          >
            <g id="play" transform="translate(0 -0.004)">
              <path
                id="Path_41"
                data-name="Path 41"
                d="M13.667,0A13.666,13.666,0,1,0,27.334,13.67,13.667,13.667,0,0,0,13.667,0Zm0,24.77a11.1,11.1,0,1,1,11.1-11.1A11.1,11.1,0,0,1,13.667,24.774ZM19.193,13.04,11.372,8.685a.691.691,0,0,0-1.13.624v8.73a.69.69,0,0,0,1.13.623L19.18,14.37A.721.721,0,0,0,19.193,13.04Z"
                fill="#c9e2ff"
              />
            </g>
          </svg>
          <div class="text">
            Multisig Wallet<br />
            <span>Explainer video</span>
          </div>
        </div>
        <div class="info-item" @click="openInfo">
          <svg
            id="info"
            xmlns="http://www.w3.org/2000/svg"
            width="32.603"
            height="32.603"
            viewBox="0 0 26.603 26.603"
          >
            <g id="Group_70" data-name="Group 70">
              <g id="Group_66" data-name="Group 66">
                <path
                  id="Path_44"
                  data-name="Path 44"
                  d="M13.3,26.6A13.3,13.3,0,1,1,26.6,13.3,13.316,13.316,0,0,1,13.3,26.6Zm0-23.893A10.592,10.592,0,1,0,23.893,13.3,10.6,10.6,0,0,0,13.3,2.709Z"
                  fill="#c9e2ff"
                />
              </g>
              <g id="Group_69" data-name="Group 69" transform="translate(11.124 6.831)">
                <g id="Group_67" data-name="Group 67" transform="translate(0.164 0)">
                  <circle
                    id="Ellipse_6"
                    data-name="Ellipse 6"
                    cx="1.58"
                    cy="1.58"
                    r="1.58"
                    transform="translate(0 3.119) rotate(-80.782)"
                    fill="#c9e2ff"
                  />
                </g>
                <g id="Group_68" data-name="Group 68" transform="translate(0 4.891)">
                  <path
                    id="Path_45"
                    data-name="Path 45"
                    d="M209.254,223.718H204.9v-2.112h.8v-3.594h-.787V215.9h3.545v5.706h.8Z"
                    transform="translate(-204.9 -215.9)"
                    fill="#c9e2ff"
                  />
                </g>
              </g>
            </g>
          </svg>
          <div class="text">
            Check the info page<br />
            <span>for usage and more</span>
          </div>
        </div>
      </div>
    </div>
    <img class="zilliqa" src="@/assets/zilliqa.png" />
  </div>
</template>

<script>
import { Zilliqa } from '@zilliqa-js/zilliqa';
import { mapGetters } from 'vuex';

export default {
  name: 'Login',
  data() {
    return {
      keystoreData: null,
      passphrase: null,
      zilliqa: null
    };
  },
  computed: {
    ...mapGetters('general', {
      network: 'selectedNetwork',
      isLogged: 'isLogged'
    })
  },
  mounted() {
    if (this.isLogged === true) {
      return this.$router.push({ name: 'welcome' });
    }

    this.zilliqa = new Zilliqa(this.network);
  },
  methods: {
    async loginWithKeystore() {
      EventBus.$emit('login-event', 'keystore');
    },
    loginWithLedger() {
      EventBus.$emit('login-event', 'ledger');
    },
    loginWithZilPay() {
      EventBus.$emit('login-event', 'zilpay');
    },
    openVideo() {
      EventBus.$emit('video-event');
    },
    openInfo() {}
  }
};
</script>

<style lang="scss" scoped>
.button {
  width: 120px;
  padding: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  svg {
    margin-bottom: 1rem;
  }
}
.container {
  z-index: 90;
}
.zilliqa {
  z-index: 0;
}
</style>