<script setup lang="ts">
//default images
// import default_dashboard from 'src/assets/help-ss/default-dashboard.png';
import default_personal_profile from 'src/assets/help-ss/default-personnal_profile.png';
import default_timesheet from 'src/assets/help-ss/default-timesheet.png';
import default_employee_list from 'src/assets/help-ss/default-employee-list.png';
import default_employee_management from 'src/assets/help-ss/default-employee-management.png';
import default_validation_page from 'src/assets/help-ss/default-validation-page.png';

const default_images: Record<UserModuleAccess, string> = {
    dashboard: '',
    personal_profile: default_personal_profile,
    timesheets: default_timesheet,
    employee_list: default_employee_list,
    employee_management: default_employee_management,
    timesheets_approval: default_validation_page,
    chatbot: '',
};

import type { HelpModuleOptions } from 'src/modules/help/models/help-module.model';
import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
import { ref } from 'vue';

const props = defineProps<{
    help_module: UserModuleAccess;
    options: HelpModuleOptions[];
    moduleIndex: number;
}>();

const help_module = props.help_module;
const current_path = ref<string>(default_images[help_module]);
const EXCLUDED_MODULES = ['dashboard', 'chatbot']

const switchSide = (index: number) => {
    if (index % 2 !== 0) {
        return false
    }
    return true
}

</script>

<template>
    <div
        v-if="!EXCLUDED_MODULES.includes(help_module)"
        class="column q-my-xs bg-secondary q-py-xl"
    >
        <!-- Card Header -->
        <div
            class="row col-auto text-h4 text-weight-thin q-py-md q-px-xl bg-secondary"
            :class="switchSide(moduleIndex) ? 'justify-end' : 'justify-start'"
        >
            {{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
        </div>

        <!-- Card Body. The visual support image will alternate left and right -->
        <div class="row col full-width q-px-none">
            <!-- Left-sided visual support -->
            <div
                class="col flex-center row"
                v-if="moduleIndex % 2 !== 0"
            >
                <transition
                    appear
                    enter-active-class="animated fade-in"
                    leave-active-class="animated fade-out"
                >
                    <q-img
                        :src="current_path"
                        loading="lazy"
                        fit="contain"
                        class="rounded-10 image-wrapper"
                    >
                    </q-img>
                </transition>
            </div>

            <!-- Area with expandable help items -->
            <div class="col column q-px-md">
                <q-expansion-item
                    v-for="option, index in options"
                    :key="index"
                    dense
                    hide-expand-icon
                    class="bg-dark rounded-5 q-my-xs shadow-10 full-width"
                    :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
                    group="help_page"
                    @before-show="current_path = option.path;"
                >
                    <template #header>
                        <div
                            class="row full-width items-center"
                            :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
                        >
                            <q-icon
                                v-if="switchSide(moduleIndex)"
                                :name="option.icon"
                                class="col-auto q-pr-sm"
                                size="sm"
                            />
                            <span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase()
                                }}</span>
                            <q-icon
                                v-if="!switchSide(moduleIndex)"
                                :name="option.icon"
                                class="col-auto q-pl-sm"
                                size="sm"
                            />
                        </div>
                    </template>
                    <div
                        class="q-px-xl q-pb-sm text-weight-medium"
                        :class="switchSide(moduleIndex) ? 'text-left' : 'text-right'"
                    >
                        {{ ($t(`${option.description}`)) }}
                    </div>
                </q-expansion-item>
            </div>

            <!-- right-sided visual support -->
            <div
                class="col flex-center row"
                v-if="moduleIndex % 2 === 0"
            >
                <transition
                    appear
                    enter-active-class="animated fade-in"
                    leave-active-class="animated fade-out"
                >
                    <q-img
                        :src="current_path"
                        loading="lazy"
                        fit="contain"
                        class="rounded-10 image-wrapper"
                    >
                    </q-img>
                </transition>
            </div>
        </div>
    </div>
</template>

<style scoped>
.image-wrapper {
    max-width: 480px;
    max-height: 320px;
    width: 100%;
}
</style>