<script setup>
import { ref, watch } from 'vue'
import BaseDialog from './BaseDialog.vue'
import { useCalendarStore } from '@/stores/CalendarStore'

const show = ref(false)
const calendarStore = useCalendarStore()

// Local copies for editing
const firstDay = ref(calendarStore.config.first_day)
const weekend = ref([...calendarStore.weekend])

function open() {
  firstDay.value = calendarStore.config.first_day
  weekend.value = [...calendarStore.weekend]
  show.value = true
}
function close() {
  show.value = false
}
function save() {
  calendarStore.config.first_day = firstDay.value
  calendarStore.weekend = [...weekend.value]
  show.value = false
}

function toggleWeekend(idx) {
  weekend.value[idx] = !weekend.value[idx]
}

defineExpose({ open })
</script>

<template>
  <BaseDialog v-model="show" title="Settings">
    <div class="setting-group">
      <label class="ec-field">
        <span>First day of week</span>
        <select v-model.number="firstDay">
          <option :value="0">Sunday</option>
          <option :value="1">Monday</option>
          <option :value="2">Tuesday</option>
          <option :value="3">Wednesday</option>
          <option :value="4">Thursday</option>
          <option :value="5">Friday</option>
          <option :value="6">Saturday</option>
        </select>
      </label>
      <div class="weekend-select ec-field">
        <span>Weekend days</span>
        <div class="weekday-pills">
          <button
            v-for="(isW, i) in weekend"
            :key="i"
            type="button"
            @click="toggleWeekend(i)"
            :class="['pill', { active: isW }]"
          >
            {{ ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][i] }}
          </button>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="footer-row">
        <button type="button" class="ec-btn" @click="close">Cancel</button>
        <button type="button" class="ec-btn save-btn" @click="save">Save</button>
      </div>
    </template>
  </BaseDialog>
</template>

<style scoped>
.setting-group {
  display: grid;
  gap: 1rem;
}
.ec-field {
  display: grid;
  gap: 0.25rem;
}
.ec-field > span {
  font-size: 0.75rem;
  color: var(--muted);
}
select {
  border: 1px solid var(--muted);
  background: var(--panel-alt, transparent);
  color: var(--ink);
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
}
.weekday-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.pill {
  border: 1px solid var(--muted);
  background: var(--panel-alt, transparent);
  color: var(--ink);
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  cursor: pointer;
}
.pill.active {
  background: var(--today);
  color: #000;
  border-color: var(--today);
  font-weight: 600;
}
.footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.ec-btn {
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
.ec-btn.save-btn {
  background: var(--today);
  color: #000;
  border-color: transparent;
  font-weight: 500;
}
</style>
