<script setup lang="ts">

import CategorySettingView from "@/components/settings/CategorySettingView.vue";
import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue";

import {ref} from "vue";
import Divider from "primevue/divider";
import CategoriesList from "@/components/settings/categories/CategoriesList.vue";
import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";

const selectedModeCode = ref("categories")


const pages = ref([
  {
    "code": "categories",
    "title": "Категории",
    "icon": "pi pi-bars"
  },
  {
    "code": "recurrent",
    "title": "Ежемесячные платежи",
    "icon": "pi pi-calendar-clock"
  },
  {
    "code": "notifications",
    "title": "Уведомления",
    "icon": "pi pi-bell"
  }
])
</script>

<template>

  <div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
    <h2 class="text-4xl font-bold ">Настройки</h2>

    <div class="xl:grid xl:grid-cols-8 w-full h-full ">
      <div class=" hidden xl:flex flex-row items-center justify-end col-start-2 col-span-1 ">
        <ul class="  flex-col  gap-1 ">
          <li v-for="page in pages" :key="page.code"
              class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
              :class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectedModeCode = page.code">
            <i :class="page.icon"/>{{ page.title }}
          </li>
        </ul>
        <Divider layout="vertical"/>
      </div>
      <div class="flex xl:hidden sm:col-span-1 w-full h-fit p-2 mb-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-xl">
        <ul class=" min-w-fit w-full">

          <li v-for="page in pages"
              class=" flex flex-row gap-2  items-center px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
              :class="selectedModeCode == page.code ? '!bg-emerald-50 text-emerald-700': '' " @click="selectedModeCode=page.code">
            <i :class="page.icon"/>{{ page.title }}
          </li>
        </ul>
      </div>
      <div class=" flex flex-col col-span-5 gap-2 max-h-[90dvh] overflow-y-scroll justify-items-start">
        <CategoriesList v-if="selectedModeCode == 'categories'"/>
        <RecurrentList v-else-if="selectedModeCode == 'recurrent'"/>
        <p v-else-if="selectedModeCode == 'notifications'" class="flex justify-items-start justify-center items-center h-screen">NOTIFICATIONS UNDER CONSTRUCTIONS</p>
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>