<template>
    <div>
        <v-icon x-large style="display: flex; font-size: 10em; color: dodgerblue;">school</v-icon>
        <v-form v-model="valid" ref="form">
            <v-text-field
                    required
                    autofocus
                    type="text"
                    data-vv-as="meno"
                    data-vv-name="meno"
                    v-model="login.meno"
                    label="Prihlasovacie meno študenta"
                    hint="zadajte prihlasovacie meno študenta"
                    v-validate="'required|min:6|max:32'"
                    :error-messages="errors.collect('meno')"
            ></v-text-field>
            <v-text-field
                    required
                    type="password"
                    label="Heslo"
                    data-vv-as="heslo"
                    data-vv-name="heslo"
                    v-model="login.heslo"
                    hint="zadajte prihlasovacie heslo"
                    v-validate="'required|min:1|max:64'"
                    :error-messages="errors.collect('heslo')"
                    :type="zobrazitHeslo ? 'password' : 'text'"
                    :append-icon="zobrazitHeslo ? 'visibility' : 'visibility_off'"
                    @keyup.enter.native="$emit('prihlasenie', login)"
                    @click:append="() => (zobrazitHeslo = !zobrazitHeslo)"
            >
            </v-text-field>
            <v-alert outline color="warning" icon="warning" :value="showValidationErrors" transition="scale-transition" class="mt-1 mb-1">
                <ul>
                    <li v-for="chyba in validacneChyby" style="list-style-type:none">{{ chyba }}</li>
                </ul>
            </v-alert>
            <v-btn
                    block
                    class="mt-3"
                    color="primary"
                    :loading="loading"
                    :dark="validnyFormular"
                    :light="!validnyFormular"
                    :disabled="!validnyFormular"
                    @click.native="$emit('prihlasenie', login)"
            >
                <v-icon left dark>input</v-icon>
                Prihlásiť sa
            </v-btn>
        </v-form>
    </div>
</template>

<script>
  const PrihlasenieForm = {
    name: 'PrihlasenieForm',
    props: {
      loading: false,
      chyba: {
        default: {
          text: null,
          zobrazit: false
        }
      },
      validacneChyby: {
        type: Array,
        required: false
      }
    },
    data () {
      return {
        login: {
          meno: '',
          heslo: ''
        },
        valid: false,
        zobrazitHeslo: true
      }
    },
    computed: {
      showValidationErrors () {
        return this.validacneChyby.length > 0
      },
      validnyFormular () {
        return !Object.keys(this.fields).some(key => this.fields[key].invalid)
      },
      color () {
        return ['error', 'warning', 'success'][Math.floor(this.progress / 45)]
      }
    }
  }

  export default PrihlasenieForm
</script>

<style scoped></style>
