<template>
    <div class="switchable-image">
        <img class="switchable-image__image" :src="value" v-if="value" />
        <FontAwesomeIcon class="switchable-image__placeholder" icon="user" v-else />
        <label class="switchable-image__input-field" v-if="edited">
            <FontAwesomeIcon class="switchable-image__input-icon" icon="pen" />
            <input
                class="switchable-image__input"
                type="file"
                accept=".jpg, .jpeg, .png, image/png, image/jpg, image/jpeg"
                @change="valueChanged"
            />
        </label>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{ value: string; edited: boolean }>();
const emit = defineEmits(["change"]);

function valueChanged(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    const file = inputElement.files?.[0];
    if (file) {
        emit("change", file);
    }
}
</script>

<style lang="scss">
.switchable-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: r(150);
    height: r(150);
    border-radius: 50%;
    border: r(1) solid color("theme-color");

    &__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
        outline: none;
        border-radius: 50%;

        &[src=""] {
            display: none;
        }
    }

    &__placeholder {
        width: 50%;
        height: 50%;
        color: color("theme-color");
    }

    &__input-field {
        position: absolute;
        inset: 0;
        height: 100%;
        border-radius: 50%;
    }

    &__input {
        display: none;
    }

    &__input-icon {
        position: absolute;
        top: r(5);
        right: r(5);
        width: 15%;
        height: 15%;
        border-radius: 50%;
        padding: r(10);

        background: color("theme-color");
        color: color("ui-color-on-background");
    }
}
</style>
