import { ref, computed } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js';
import { usePlannerState } from '../../services/planner-state-service.js';

export default {
  name: 'PlannerLayout',
  setup() {
    const { state, methods } = usePlannerState();

    const leftDrawer = ref(false);
    const filterDrawer = ref(false);

    const rightDrawer = computed({
      get: () => !!state.selectedAgent,
      set: (value) => {
        if (!value) {
          state.selectedAgent = null;
          state.selectedDate = null;
        }
      }
    });

    const editMode = computed(() => state.selectedDate ? 'assignment' : 'profile');

    return {
      state,
      methods,
      leftDrawer,
      filterDrawer,
      rightDrawer,
      editMode,
    };
  },
  template: `
    <q-layout view="hHh Lpr fFf" class="planner-layout">
      <planner-header @toggle-left-drawer="leftDrawer = !leftDrawer" />
      <planner-settings-drawer v-model="leftDrawer" />
      <planner-filter-drawer v-model="filterDrawer" />
      <planner-edit-drawer v-model="rightDrawer" :mode="editMode" />
      <q-page-container><planner-grid @toggle-filter-drawer="filterDrawer = !filterDrawer" /></q-page-container>
    </q-layout>`
};