<template>
    <f-fieldset>
        <template #label> Anställningsperiod </template>
        <f-datepicker-field
            ref="fromDate"
            v-model="fromDate"
            v-validation.required.invalidWeekdays.minDate.maxDate="{
                invalidWeekdays: { days: [Weekday.SATURDAY, Weekday.SUNDAY] },
                minDate: {
                    limit: MIN_DATE,
                },
                maxDate: {
                    limit: MAX_DATE,
                },
            }"
            @component-validity="onValidityFromDate"
        >
            Från och med
        </f-datepicker-field>

        <f-datepicker-field
            v-model="toDate"
            v-validation.required.invalidWeekdays.minDate.maxDate="{
                invalidWeekdays: { days: [Weekday.SATURDAY, Weekday.SUNDAY] },
                minDate: {
                    limit: toMinLimit,
                },
                maxDate: {
                    limit: MAX_DATE,
                },
            }"
        >
            Till och med
        </f-datepicker-field>
    </f-fieldset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { FDate, Weekday } from "@fkui/date";
import { isEmpty } from "@fkui/logic";
import { type ComponentValidityEvent, FDatepickerField, FFieldset } from "@fkui/vue";

const MIN_DATE = FDate.now().addMonths(-1).toString();
const MAX_DATE = FDate.now().addMonths(1).toString();

export default defineComponent({
    components: { FDatepickerField, FFieldset },
    data() {
        return {
            fromDate: "",
            toDate: "",
            toMinLimit: MIN_DATE,
            Weekday,
            MIN_DATE,
            MAX_DATE,
        };
    },
    methods: {
        getMinToDate(validFromDate: boolean): string {
            if (isEmpty(this.fromDate) || !validFromDate) {
                return MIN_DATE;
            }
            return this.fromDate;
        },
        onValidityFromDate({ detail: { isValid } }: CustomEvent<ComponentValidityEvent>): void {
            this.toMinLimit = this.getMinToDate(isValid);
        },
    },
});
</script>

<template>
    <f-validation-form :use-error-list="false">
        <p>Namn får inte vara kortare än minsta längd.</p>

        <template #error-message> Alla frågor är inte korrekt ifyllda. Titta i: </template>

        <div class="row">
            <div id="min-name" class="col col--md-6">
                <f-text-field
                    v-model="name"
                    v-validation.required.maxLength.notShorter="{
                        notShorter: {
                            minLength: minLength,
                            errorMessage: 'Namn får inte vara kortare än minimum längd',
                        },
                        maxLength: { length: 100 },
                    }"
                >
                    Namn
                </f-text-field>
            </div>
            <div id="min-minLength" class="col col--md-6">
                <f-text-field
                    v-model="minLength"
                    v-validation.required.maxLength="{ maxLength: { length: 100 } }"
                >
                    Minimumlängd
                </f-text-field>
            </div>
        </div>

        <button class="button" type="submit">Signera</button>
    </f-validation-form>
</template>

<script>
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";
import { FValidationForm, FTextField } from "@fkui/vue";

/* register a new validator named "notShorter" */
ValidationService.registerValidator({
    name: "notShorter",
    validation(value, element, config) {
        return value.length >= config.minLength;
    },
});

export default defineComponent({
    name: "ValidationPluginDynamicValidation",
    components: {
        FValidationForm,
        FTextField,
    },
    data() {
        return {
            name: "",
            minLength: "8",
        };
    },
});
</script>