<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<HelpModuleKey, string> = {
    dashboard: default_dashboard,
    personal_profile: default_personal_profile,
    timesheets: default_timesheet,
    employee_list: default_employee_list,
    employee_management: default_employee_management,
    timesheets_approval: default_validation_page,
};

import type { HelpModuleKey, HelpModuleOptions } from 'src/modules/help/models/help-module.model';
import { ref } from 'vue';

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

const help_module = props.help_module;
const current_path = ref<string>(default_images[help_module]);

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

</script>

<template>
    <div class="column q-my-xs bg-secondary q-py-xl">
        <!-- Card Header -->

        <div
            class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
            :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
        >
            {{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
        </div>
        <!-- Card Body -->

        <div class="row col full-width q-px-none">
            <!-- Object and descriptions zone -->
            <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
                        class="image-wrapper"
                        :src="current_path"
                        loading="lazy"
                        fit="contain"
                    >
                    </q-img>

                </transition>
            </div>
            <div class="col column">

                <q-expansion-item
                    v-for="option, index in options"
                    :key="index"
                    hide-expand-icon
                    class="bg-gray-2 text-weight-bolder row"
                    :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">{{ $t(option.label).toUpperCase() }}</span>
                            <q-icon
                                v-if="!switchSide(moduleIndex)"
                                :name="option.icon"
                                class="col-auto q-pl-sm"
                                size="sm"
                                fit="contain"
                            />
                        </div>
                    </template>
                    <div
                        class="q-px-xl"
                        :class="switchSide(moduleIndex) ? 'text-left' : 'text-right'"
                    >
                        {{ ($t(`${option.description}`)) }}
                    </div>
                </q-expansion-item>
            </div>
            <!-- images of the related selected option -->
            <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
                        class="image-wrapper"
                        :src="current_path"
                        loading="lazy"
                    >
                    </q-img>
                </transition>
            </div>
        </div>
    </div>
</template>

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