import { useQuasar } from 'https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.umd.prod.js';
import { usePlannerState } from '../../services/planner-state-service.js';

export default {
  name: 'PlannerSettingsDrawer',
  props: { modelValue: Boolean },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { state, methods } = usePlannerState();
    const $q = useQuasar();

    const simulateWssLock = () => methods.simulateWssLock($q);

    return {
      state,
      resetToToday: () => {
        methods.resetToToday();
        emit('update:modelValue', false);
      },
      simulateWssLock,
    };
  },
  template: `
    <q-drawer :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" side="left" bordered :width="300" class="bg-white">
      <q-scroll-area class="fit">
        <div class="q-pa-lg">
          <div class="text-h6 text-weight-bold q-mb-xs text-indigo-10">Workspace</div>
          <div class="text-caption text-grey-6 q-mb-xl">Manage grid and picker preferences.</div>
          <div class="column q-gutter-y-lg">
            <div><div class="text-overline text-grey-6 q-mb-sm">Timeline Range</div><q-select v-model="state.viewScope" :options="[4, 8, 12]" outlined dense rounded emit-value map-options suffix=" Weeks" bg-color="white"></q-select></div>
            <div><div class="text-overline text-grey-6 q-mb-sm">Date Picker Week Start</div><q-select v-model="state.pickerStartDay" :options="[{label: 'Sunday', value: 0}, {label: 'Monday', value: 1}]" outlined dense rounded emit-value map-options bg-color="white"></q-select></div>
            <q-separator />
            <div><div class="text-overline text-grey-6 q-mb-sm">Dev Tools</div><q-btn outline rounded color="purple-7" label="Simulate WSS Lock" class="full-width" icon="lock" @click="simulateWssLock"><q-tooltip>Simulate receiving a "Lock Cell" message from server</q-tooltip></q-btn></div>
            <q-separator />
            <div>
              <div class="text-overline text-grey-6 q-mb-sm">Grid Visibility</div>
              <q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Reading Crosshair</q-item-label><q-item-label caption>Dynamic highlight on hover</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.crosshairActive" color="indigo-8"></q-toggle></q-item-section></q-item>
              <q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Show EOD Targets</q-item-label><q-item-label caption>Top row KPI</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.showEodTargets" color="pink-6"></q-toggle></q-item-section></q-item>
              <q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Show Availability</q-item-label><q-item-label caption>Traffic light indicators</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.showAvailability" color="orange-6"></q-toggle></q-item-section></q-item>
            </div>
            <q-separator />
            <q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Compact Grid</q-item-label><q-item-label caption>High density view</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.isCompact" color="indigo-8"></q-toggle></q-item-section></q-item>
            <q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Working Weekends</q-item-label><q-item-label caption>Enable Sat/Sun shifts</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.weekendsAreWorkingDays" color="indigo-8"></q-toggle></q-item-section></q-item>
            <q-btn outline rounded color="indigo-8" label="Reset to Today" icon="today" class="full-width q-mt-md" @click="resetToToday"></q-btn>
          </div>
        </div>
      </q-scroll-area>
    </q-drawer>`
};