<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { defineProps, withDefaults, defineModel } from "vue";

const model = defineModel<string>();

export interface Props {
  noToday?: boolean;
  required?: boolean;
  placeholder?: string;
  startDate?: string;
  maxDate?: string;
}

const props = withDefaults(defineProps<Props>(), {
  required: false,
  placeholder: "15.06.1982",
  startDate: "1982-01-01",
  maxDate: "2007-01-01",
});

const userStore = useUserStore();
</script>

<template>
  <VueDatePicker
    v-model="model"
    format="dd.MM.yyyy"
    model-type="yyyy-MM-dd"
    name="date"
    prevent-min-max-navigation
    :required="props.required"
    :enable-time-picker="false"
    text-input
    :no-today="props.noToday"
    :max-date="props.maxDate"
    :placeholder="props.placeholder"
    :start-date="props.startDate"
    :locale="userStore.language"
    :cancel-text="$t('a.Abbrechen')"
    :select-text="$t('a.Auswählen')"
  ></VueDatePicker>
</template>

<style>
.dp__theme_light {
  --dp-text-color: #585f63;
  --dp-primary-color: #41b5fa;
  --dp-border-color-focus: #3d6dcc;
}

:root {
  --dp-font-family: "Buenos Aires" sans-serif;
  --dp-border-radius: none;
  --dp-font-size: 0.875rem;
  --dp-cell-border-radius: none;
}
</style>
