<template>
    <formElement :codename="codename" :label="label" :errors="errors">
        <div class="c-password-preview">
            <input class="c-input"
                   :type="type"
                   :id="codename"
                   :name="codename"
                   :data-test="codename"
                   autocomplete="new-password"
                   v-model="value"
                   @blur="previewing = false"
                   ref="input"
            />
            <button type="button" class="c-password-preview__toggle" @click="toggle" data-test="password-preview-toggle">
                <span v-if="!previewing">{{ trans('form.show') }}</span>
                <span v-if="previewing">{{ trans('form.hide') }}</span>
            </button>
        </div>
    </formElement>
</template>

<script>
    import FormElement from './layout/formElement'
    import {mapGetters} from "vuex";

    export default {
        props: {
            codename: {type: String, required: true},
            label: {type: String, default: null},
            errors: {type: Array, default: () => []},
        },
        components: {
            'formElement': FormElement,
        },
        data: function() {
          return {
              previewing: false,
              value: ''
          }
        },
        computed: {
            type: function() {
                return this.previewing ? 'text' : 'password';
            },
            ...mapGetters({
                trans: "g11n/translation/translation", //Maps the getter function "translation" in vuex module translations.js to a computed property called trans in this component
            }),
        },
        methods: {
            toggle: function() {
                this.previewing = !this.previewing;
                if(!previewing) return;

                //Focus on the input and move cursor to end of line
                this.$refs.input.focus();
                setTimeout(() => { this.$refs.input.selectionStart = this.$refs.input.selectionEnd = this.value.length; }, 0);
            },
        },
    }
</script>