<script setup lang="ts">
import { ArrowDownUpIcon, Settings2Icon } from "@lucide/vue";
import { SortType } from "@/enums";

defineEmits<(e: "changeSort") => void>();

const sortType = defineModel<SortType>("sortType", { required: true });
const sortReverse = defineModel<boolean>("sortReverse", { required: true });
const showLastChecked = defineModel<boolean>("showLastChecked", {
    required: true,
});
const showNextReset = defineModel<boolean>("showNextReset", { required: true });
const separateCompleted = defineModel<boolean>("separateCompleted", {
    required: true,
});
const showMissed = defineModel<boolean>("showMissed", { required: true });
</script>

<template>
    <div class="collapse collapse-arrow font-light text-sm">
        <input id="options-dropdown p-0" type="checkbox" />
        <div class="collapse-title p-0 content-center">
            <settings-2-icon class="inline" :size="16" />
            {{ $t("options.title") }}
        </div>
        <div class="collapse-content">
            <div class="w-full flex flex-col gap-2 text-left overflow-scroll">
                <label class="label">
                    <arrow-down-up-icon class="inline" />
                    {{ $t("options.sort_by") }}
                    <select
                        v-model="sortType"
                        class="select"
                        @change="$emit('changeSort')"
                    >
                        <option :value="SortType.CREATED_AT">
                            {{ $t("options.sort.created_at") }}
                        </option>
                        <option :value="SortType.UPDATED_AT">
                            {{ $t("options.sort.updated_at") }}
                        </option>
                        <option :value="SortType.CHECK_DATE">
                            {{ $t("options.sort.check_date") }}
                        </option>
                        <option :value="SortType.RESET_DATE">
                            {{ $t("options.sort.reset_date") }}
                        </option>
                        <option :value="SortType.NAME">
                            {{ $t("options.sort.name") }}
                        </option>
                    </select>
                </label>
                <label class="label text-wrap">
                    <input
                        v-model="sortReverse"
                        type="checkbox"
                        class="checkbox"
                        @change="$emit('changeSort')"
                    />
                    {{ $t("options.reverse_sort") }}
                </label>
                <label class="label text-wrap">
                    <input
                        v-model="showLastChecked"
                        type="checkbox"
                        class="checkbox"
                    />
                    {{ $t("options.last_checked") }}
                </label>
                <label class="label text-wrap">
                    <input
                        v-model="showNextReset"
                        type="checkbox"
                        class="checkbox"
                    />
                    {{ $t("options.next_reset") }}
                </label>
                <label class="label text-wrap">
                    <input
                        v-model="separateCompleted"
                        type="checkbox"
                        class="checkbox"
                    />
                    {{ $t("options.separate_completed") }}
                </label>
                <label class="label text-wrap">
                    <input
                        v-model="showMissed"
                        type="checkbox"
                        class="checkbox"
                    />
                    {{ $t("options.missed") }}
                </label>
            </div>
        </div>
    </div>
</template>
