<template>
  <div class="InputField">
    <h3 v-if="label.length > 0" class="label">
      {{ label }}
    </h3>
    <input
      :type="type"
      :value="value"
      class="input-concave"
      :disabled="disabled"
      @input="onInput($event.target.value)"
      :placeholder="placeholder"
    />
    <div class="errors" mode="in-out">
        <li class="error" v-for="error in errors" :key="error" style="padding: 0.3rem;">
            {{ error }}
        </li>
    </div>
  </div>
</template>

<script setup lang="ts">

import { parseInput, useValidation, Validator } from "@/validation";
import { defineComponent, computed, defineEmits, defineProps, PropType } from "vue";
import {computed} from 'vue';

const props = defineProps<{
    type: string,
    value: number | string,
    nullValue?: number,
    label: string,
    validators: Function as PropType<() => Array<Validator<number>>>,
    placeholder: string,
}>();
const emit = defineEmits<{
    (eventName: 'input', value: string): void
}>();

function onInput(value: string) {
    emit("input", value);
}
const {} = useValidation(
    computed(() => props.value),
    props.validators
);
</script>

<style scoped lang="scss">
@import "@/styles/main";
.InputField {
    @include grid-center-padding(1.5rem);
    grid-auto-flow: column;
    grid-template-columns: 2fr 1fr auto;
    grid-gap: 2rem;
    .label {
        font-weight: bold;
        // width: 300px;
        text-align: center;
    }
    input {
        width: 100%;
        min-width: 3rem;
    }
    .input-concave {
        @include input-concave;
        &.disabled {
            box-shadow: none;
        }
    }
    .errors {
        grid-column: 1 / -1;
        grid-row: 2;
        .error {
            width: 25rem;

        }
    }

}
</style>