<template lang="pug">
  .flex.flex-col.gap-y-2
    .label(v-if="!!label") {{label}}
    .field
      input(
        v-model="value",
        type="date",      
        max="9999-12-31",
        min="0000-01-01"
)    
</template>

<script>
//TODO стили перенести для всего кита, избавиться от scoped
//TODO покрыть тестами
//TODO сделать серый цвет плейсхолдера
//TODO обработать ошибку при стирании даты
export default {
  name: "BaseInputDate",
  props: {
    modelValue: Date,
    label: String,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.modelValue?.toISOString().split("T")[0];
      },
      set(value) {
        this.$emit("update:modelValue", value ? new Date(value) : null);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.field
  height: 40px
  display: flex
  align-items: center
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px
  padding: 8px 16px
  input
    width: 100%
    cursor: text
    border: none
    outline: none
    background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
    &::-webkit-calendar-picker-indicator
      opacity: 0
      cursor: pointer

.label
  font-weight: 600
  font-size: 14px
  line-height: 16px
  opacity: 0.4
</style>
