<template>
  <section class="page">
    <div class="page-heading">
      <div>
        <p class="eyebrow">Areas</p>
        <h1>Tree</h1>
      </div>
      <UiButton variant="primary" disabled>Create area</UiButton>
    </div>

    <AppLoadingState v-if="areasStore.isLoading" text="Loading areas tree" />

    <AppErrorState
      v-else-if="areasStore.error"
      title="Areas loading failed"
      :message="areasStore.error.message"
      :retry="areasStore.loadAreas"
    />

    <AppEmptyState
      v-else-if="areasStore.areaTree.length === 0"
      title="No areas"
      message="Create area flow will be implemented in the mutation phase."
    />

    <ul v-else class="area-tree">
      <AreaTreeNode v-for="area in areasStore.areaTree" :key="area.id" :area="area" />
    </ul>
  </section>
</template>

<script setup>
import { onMounted } from "vue";
import { useAreasStore } from "../../../stores/areas";
import AreaTreeNode from "../components/AreaTreeNode.vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import UiButton from "../../../components/ui/UiButton.vue";

const areasStore = useAreasStore();

onMounted(() => {
  areasStore.loadAreas();
});
</script>