<script setup lang="ts">
import { computed } from 'vue';
import {
  buildWorkbenchActivityItems,
  buildWorkbenchBannerSummary,
  buildWorkbenchKpiCards,
  buildWorkbenchProjectItems,
  buildWorkbenchTodoItems
} from './homepage';
import {
  workbenchActivityMock,
  workbenchBannerSummaryMock,
  workbenchKpiMock,
  workbenchProjectMock,
  workbenchTodoMock
} from './mock';
import WorkbenchBanner from './modules/workbench-banner.vue';
import WorkbenchKpi from './modules/workbench-kpi.vue';
import WorkbenchTodoPanel from './modules/workbench-todo-panel.vue';
import WorkbenchActivityPanel from './modules/workbench-activity-panel.vue';
import WorkbenchProjectGrid from './modules/workbench-project-grid.vue';

defineOptions({ name: 'Workbench' });

const bannerSummary = computed(() => buildWorkbenchBannerSummary(workbenchBannerSummaryMock));
const kpiCards = computed(() => buildWorkbenchKpiCards(workbenchKpiMock));
const todoItems = computed(() => buildWorkbenchTodoItems(workbenchTodoMock));
const activityItems = computed(() => buildWorkbenchActivityItems(workbenchActivityMock));
const projectItems = computed(() => buildWorkbenchProjectItems(workbenchProjectMock));
</script>

<template>
  <div class="workbench">
    <WorkbenchBanner :summary="bannerSummary" />

    <WorkbenchKpi :cards="kpiCards" />

    <section class="workbench__main">
      <WorkbenchTodoPanel :items="todoItems" />
      <WorkbenchActivityPanel :items="activityItems" />
    </section>

    <WorkbenchProjectGrid :items="projectItems" />
  </div>
</template>

<style scoped>
.workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workbench__main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
}

@media (width <= 1280px) {
  .workbench__main {
    grid-template-columns: 1fr;
  }
}
</style>
