<template>
    <div class="input-comp" :class="classes">
        <label class="input-comp__label">{{ placeholder }}</label>
        <input
            class="input-comp__input"
            v-model="localValue"
            :type="localType"
            :readonly="readOnly"
            @focus="focused = true"
            @blur="focused = false"
        />
        <FontAwesomeIcon class="input-comp__revealer" icon="eye" @click="togglePasswordVisibility()" v-if="localType === 'password'" />
        <FontAwesomeIcon class="input-comp__revealer" icon="eye-slash" @click="togglePasswordVisibility()" v-else />
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";

const props = defineProps({
    modelValue: String,
    placeholder: String,
    type: { type: String, default: "text" },
    readOnly: { type: Boolean, default: false },
    hasWarning: { type: Boolean, default: false },
});
const emit = defineEmits(["update:modelValue"]);

const focused = ref(false);

const classes = computed(() => ({
    "input-comp--has-value": props.modelValue !== "",
    "input-comp--has-focus": focused.value && !props.readOnly,
    "input-comp--has-warning": props.hasWarning,
    "input-comp--readonly": props.readOnly,
    "input-comp--password": props.type === "password",
}));

const localValue = computed({
    get: () => props.modelValue,
    set: (to) => {
        emit("update:modelValue", to);
    },
});

const localType = ref("");

onMounted(() => {
    localType.value = props.type;
});

function togglePasswordVisibility() {
    if (props.type === "password") {
        localType.value = localType.value === "password" ? "text" : "password";
    }
}
</script>

<style lang="scss">
.input-comp {
    $p: &;

    position: relative;
    height: r(64);
    min-width: r(200);

    &__label {
        position: absolute;
        bottom: r(21);
        font-size: r(22);
        color: color("ui-background");
        z-index: 1;
        transition: 0.18s ease;
        pointer-events: none;
        user-select: none;
    }

    &__input {
        position: absolute;
        bottom: r(15);
        width: 100%;
        height: r(32);
        font-size: r(22);
        background: color("main-background");
        color: color("main-color");
        border: 0;
        outline: 0;
    }

    &__revealer {
        display: none;
        position: absolute;
        right: 0;
        bottom: r(18);
        height: r(16);
        width: r(20);
        padding: r(5);
        color: color("ui-background");
        cursor: pointer;
    }

    &::before {
        content: "";
        position: absolute;
        bottom: r(10);
        width: 100%;
        height: r(1);
        background: color("ui-background");
    }

    &::after {
        content: "";
        position: absolute;
        bottom: r(10);
        width: 100%;
        height: r(2);
        background: color("main-color");
        transform: scaleX(0);
        z-index: 1;
        transition: transform 0.18s ease;
    }

    &--has-focus,
    &--has-value {
        #{$p}__label {
            bottom: r(46);
            font-size: r(18);
        }
    }

    &--has-focus {
        &::after {
            transform: scaleX(1);
        }
    }

    &--password {
        #{$p}__revealer {
            display: block;
        }
        #{$p}__input {
            width: calc(100% - r(30));
        }
    }

    &--readonly {
        &::before {
            background: color("ui-color");
        }
    }

    &--has-warning {
        &::before {
            background: color("warning-color");
            height: r(2);
        }
    }
}
</style>
