<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    label: { type: String, default: '' },
    modelValue: { type: [String, Number], default: '' },
    type: { type: String, default: 'text' },
    error: { type: String, default: '' },
    options: { type: Array, default: () => [] },
    required: { type: Boolean, default: false },
    placeholder: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue'])

const textareaRef = ref(null)

const autoResize = () => {
    if (!textareaRef.value) return
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
}

watch(() => props.modelValue, () => {
    if (props.type === 'textarea') {
        autoResize()
    }
})
</script>

<template>
    <div class="form-field">
        <label v-if="label" class="field-label">
            {{ label }}<span v-if="required" class="required-star"> *</span>
        </label>

        <textarea
            v-if="type === 'textarea'"
            ref="textareaRef"
            :value="modelValue"
            :placeholder="placeholder"
            :required="required"
            class="field-input field-textarea"
            :class="{ 'field-error': error }"
            rows="3"
            @input="emit('update:modelValue', $event.target.value); autoResize()"
        />

        <select
            v-else-if="type === 'select'"
            :value="modelValue"
            :required="required"
            class="field-input field-select"
            :class="{ 'field-error': error }"
            @change="emit('update:modelValue', $event.target.value)"
        >
            <option value="">-- selecteer --</option>
            <option
                v-for="opt in options"
                :key="opt.value ?? opt"
                :value="opt.value ?? opt"
            >
                {{ opt.label ?? opt }}
            </option>
        </select>

        <input
            v-else
            :type="type"
            :value="modelValue"
            :placeholder="placeholder"
            :required="required"
            class="field-input"
            :class="{ 'field-error': error }"
            @input="emit('update:modelValue', $event.target.value)"
        />

        <p v-if="error" class="field-error-msg">{{ error }}</p>
    </div>
</template>

<style scoped>
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #8892b0;
    letter-spacing: 0.5px;
}

.required-star {
    color: #e94560;
}

.field-input {
    background: #0f1b35;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    color: #e8e8e8;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.field-input:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.12), 0 0 12px rgba(0, 210, 255, 0.1);
}

.field-input.field-error {
    border-color: rgba(233, 69, 96, 0.6);
}

.field-input.field-error:focus {
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.12);
}

.field-textarea {
    resize: none;
    overflow: hidden;
    min-height: 72px;
    line-height: 1.5;
}

.field-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.field-select option {
    background: #16213e;
    color: #e8e8e8;
}

/* Date input calendar icon color */
.field-input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(160deg);
    cursor: pointer;
}

.field-error-msg {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #e94560;
    margin: 0;
}
</style>
