<template>
    <div>
        <div class="meter-content">
            <ul class="meter-progress" :class="classes[points]">
                <li v-for="bar in 5" :key="bar" />
            </ul>
            <ul class="meter-checklist">
                <li v-for="(item, index) in items" :key="index" :class="{ check: isCheck(index) }">{{ item }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PasswordMeter',
        props: {
            password: {
                type: String,
                required: true,
                default: '',
            },
        },
        data() {
            return {
                classes: ['very-low', 'low', 'medium', 'good', 'very-good'],
                items: [
                    'Ter pelo menos 8 caracteres',
                    'Letra maiúscula e minúscula',
                    'Pelo menos um número',
                    ' Um carectere especial (Ex: ! @ %)',
                ],
                points: null,
                results: [],
                interval: null,
                timeBound: 500,
            };
        },
        watch: {
            password(value) {
                clearInterval(this.interval);
                if (value.length === 0) {
                    this.points = null;
                    this.results = [];
                }
                if (value.length < 8) return;
                this.interval = setInterval(() => {
                    this.checkPassword();
                }, this.timeBound);
            },
        },
        methods: {
            isCheck(value) {
                return this.results.indexOf(value + 1) >= 0;
            },
            checkPassword() {
                clearInterval(this.interval);
                fetch('https://api.prd.parceirodaconstrucao.com.br/users/profile/password_validity_checks', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        password: this.password,
                    }),
                })
                    .then((response) => response.json())
                    .then((json) => {
                        this.points = json.pointsMeter;
                        this.results = json.pointsResult;
                        this.$emit('passwordIsValid', json.valid);
                    });
            },
        },
    };
</script>

<style lang="scss">
    .meter-content {
        display: flex;
        flex-flow: column nowrap;
        gap: 6px;
        width: auto;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        margin: 6px 0;
        user-select: none;
    }

    .meter-progress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
        padding: 0 !important;
        margin: 0;
        &.very-low li:nth-child(1) {
            background-color: #c22828;
        }
        &.low li:nth-child(-n + 2) {
            background-color: #f03e3e;
        }
        &.medium li:nth-child(-n + 3) {
            background-color: #ffbd3d;
        }
        &.good li:nth-child(-n + 4) {
            background-color: #51cf66;
        }
        &.very-good li:nth-child(-n + 5) {
            background-color: #2b8a3e;
        }
        li {
            list-style: none;
            height: 2px;
            width: auto;
            flex-grow: 1;
            background-color: #adb5bd;
            transition: all 0.35s;
        }
    }

    .meter-checklist {
        padding: 0 !important;
        margin: 0;
        li {
            list-style: none;
            height: 21px;
            color: #495057;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 0 0 21px;
            position: relative;
            transition: all 0.35s;
            &::before {
                content: '';
                height: 3px;
                width: 3px;
                border-radius: 2px;
                background-color: #495057;
                position: absolute;
                top: 9px;
                left: 9px;
            }
            &.check {
                color: #adb5bd;
                text-decoration: line-through;
                &::before {
                    background-color: #adb5bd;
                }
            }
        }
    }
</style>
