<script setup lang="ts">

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

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

const selectedModeCode = ref("common")

const selectMode = (mode: string) => {
  localStorage.setItem("selectedSettingPage", mode);
  selectedModeCode.value = mode;
}

onMounted(() => {
  const localStorageMode = localStorage.getItem("selectedSettingPage");
  if (localStorageMode) {
    selectedModeCode.value = localStorageMode;
  } else selectedModeCode.value = "common";
})


const pages = ref([
  {
    "code": "common",
    "title": "Общие",
    "icon": "pi pi-cog"
  },
  {
    "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-start 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="selectMode(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 items-start">
          <li v-for="page in pages"
              class=" flex flex-row gap-2   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="selectMode(page.code)">
            <i :class="page.icon"/>{{ page.title }}
          </li>
        </ul>
      </div>
      <div class=" flex flex-col col-span-5 gap-2  justify-start justify-items-start">
        <CommonSettings v-if="selectedModeCode == 'common'"/>
        <CategoriesList v-else-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>