<script>
import { signin } from '../api';
import { setToken } from '../api';
export default {
  methods: {
    goToSignUp() {
      this.$router.push({ name: 'signup' });
    },
    async login() {
       
      const phone = this.$refs.phoneInput.value.trim();
      const password = this.$refs.passwordInput.value.trim();
      const phoneRegex = /^7\d{10}$/;
      if (!phoneRegex.test(phone)) {
        alert('Invalid phone number');
        return;
      }



      const data = {
        phone,
        password
      };

      const response = await signin(data);
      console.log(response.data)
      setToken(response.data.userId)
      this.$router.push({ name: 'home' });
    }
  }
}
</script>

<template>
    <div class="blur"/>
    <div class="container">

        <div class="input">
            <div class="input-icon">
                <i class="material-icons">call</i>
            </div>
            <input type="text" placeholder="+7 (___) ___-__-__" class="input-field" ref="phoneInput">
        </div>

        <div class="input">
            <div class="input-icon">
                <i class="material-icons">lock</i>
            </div>
            <input type="text" placeholder="* * * *"  class="input-field" ref="passwordInput">
        </div>

        <div class="button" style="margin-top: 36px;" @click="login">
            <div class="button-text">Войти</div>
        </div>

        <div style="z-index: 1; height: 24px; color: #A9A9A9FF; margin-top: 36px;" color="#aaaaa9" @click="goToSignUp">
            Хотите создать аккаунт?
        </div>
    </div>
</template>

<style scoped>


.blur {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 35%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(8px);
}


.input {
    color: #aaaaa9;
    z-index: 1;
    display: flex;
    flex-direction: row;
    background-color: rgb(208, 208, 208);
    height: 64px;
    width: 100%;
    box-shadow: 24px;
    margin-bottom: 12px;
}

.input-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: #F2F2F2FF 1px solid;
    box-shadow: 1px 1px 1px 1px #F2F2F282;
}

.input-field {
    flex: 1;
    padding-left: 16px;
    border: #F2F2F2FF 1px solid;
    box-shadow: 1px 1px 1px 1px #F2F2F282;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 24px 24px;
    background-image: url("../assets/background.png");
}

.button {
    z-index: 1;
    height: 64px; 
    background-color: #657f94; 
    display: flex; 
    width: 100%;
    align-items: center; 
    justify-content: center;
}

.button-text {
    flex: 1; 
    text-align: center; 
    font-weight: bold;
}
</style>