<script setup lang="ts">
import { ElDatePicker } from 'element-plus';
import {useGettext} from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Props
const { disabled = false } = defineProps<{
	disabled?: boolean;
}>();

// Disable dates in the past
const validateDate = (date: Date) => {
    const today = new Date();
    return date.getTime() < today.getTime() - 24 * 60 * 60 * 1000;
};

// Store the value
const value = defineModel<string[]>();
</script>

<template>
    <div>
        <ElDatePicker
            class="date-picker"
            popper-class="date-picker-popper"
            v-model="value"
            type="daterange"
            :start-placeholder="$gettext('Start date')"
            :end-placeholder="$gettext('End date')"
            :clearable="false"
            :disabled-date="validateDate"
			:disabled="disabled"
        />
    </div>
</template>

<style lang="scss">
.date-picker {
    --el-component-size: 2.5rem;
    --el-border-radius-base: 0.5rem;
    --el-date-editor-width: 100%;
    --el-input-border-color: theme('colors.neutral-500');
    --el-input-focus-border-color: theme('colors.primary-500');
    --el-input-hover-border-color: theme('colors.primary-500');
	--el-color-primary: theme('colors.primary-500');
    --el-text-color-regular: theme('colors.base-500');

    .el-icon {
        svg {
            @apply text-primary-500;
        }
    }
}

.el-popper.date-picker-popper {
    @apply border border-neutral-500;

    --el-popover-border-radius: 0.5rem;
    --el-datepicker-inner-border-color: theme('colors.neutral-500');
    --el-border-color-light: theme('colors.neutral-500');
    --el-text-color-regular: theme('colors.base-500');
	--el-fill-color-light: theme('colors.base-50');
	--el-color-primary: theme('colors.primary-500');
	--el-border-color-extra-light: theme('colors.primary-50');

    .el-picker-panel {
        @apply rounded-lg;

        .el-picker-panel__icon-btn {
            @apply mt-1;
        }
    }
}
</style>
