"use client";

import { MultiDatePicker } from "./index";

export interface DemoProps {
  accent?: string;
  maxDates?: number;
  startMonth?: number;
  startYear?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#F5C542", maxDates = 5, startMonth = 6, startYear = 2025 }: DemoProps) {
  return (
    <div className="w-full p-6">
      <MultiDatePicker accent={accent} maxDates={maxDates} startMonth={startMonth} startYear={startYear} />
    </div>
  );
}

1d:T281d, 1e:T2257c,

<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    maxDates?: number;
    startMonth?: number;
    startYear?: number;
  }>(),
  { accent: "#F5C542", maxDates: 5, startMonth: 6, startYear: 2025 },
);

const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const MONTH_NAMES = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December",
];

function pad(n: number): string {
  return n < 10 ? `0${n}` : `${n}`;
}
function keyOf(y: number, m: number, d: number): string {
  return `${y}-${pad(m)}-${pad(d)}`;
}
function daysInMonth(y: number, m: number): number {
  return new Date(y, m, 0).getDate();
}
function firstWeekday(y: number, m: number): number {
  return new Date(y, m - 1, 1).getDay();
}
function addMonths(y: number, m: number, delta: number): { y: number; m: number } {
  const idx = y * 12 + (m - 1) + delta;
  const ny = Math.floor(idx / 12);
  const nm = ((idx % 12) + 12) % 12 + 1;
  return { y: ny, m: nm };
}
function monthLabel(y: number, m: number): string {
  return `${MONTH_NAMES[m - 1]} ${y}`;
}
function buildCells(y: number, m: number): Array<number | null> {
  const lead = firstWeekday(y, m);
  const total = daysInMonth(y, m);
  const cells: Array<number | null> = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let d = 1; d <= total; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}
function getContrastColor(hex: string): string {
  const clean = hex.replace("#", "");
  const r = parseInt(clean.substring(0, 2), 16) || 0;
  const g = parseInt(clean.substring(2, 4), 16) || 0;
  const b = parseInt(clean.substring(4, 6), 16) || 0;
  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
  return yiq >= 150 ? "#14161b" : "#ffffff";
}

function seedSelection(): Set<string> {
  const seed = new Set<string>();
  const count = Math.min(3, Math.max(1, props.maxDates));
  const first = { y: props.startYear, m: props.startMonth };
  const second = addMonths(props.startYear, props.startMonth, 1);
  const candidates = [
    { ...first, d: 6 },
    { ...first, d: 14 },
    { ...second, d: 3 },
  ];
  candidates.slice(0, count).forEach(({ y, m, d }) => {
    const dim = daysInMonth(y, m);
    seed.add(keyOf(y, m, Math.min(d, dim)));
  });
  return seed;
}

const viewYear = ref(props.startYear);
const viewMonth = ref(props.startMonth);
const selected = reactive<Set<string>>(seedSelection());
const focusKey = ref<string>(keyOf(props.startYear, props.startMonth, 1));
const dayRefs = new Map<string, HTMLButtonElement | null>();

function setDayRef(key: string, el: Element | null) {
  dayRefs.set(key, el as HTMLButtonElement | null);
}

watch(
  () => [props.startYear, props.startMonth],
  () => {
    viewYear.value = props.startYear;
    viewMonth.value = props.startMonth;
  },
);

watch(
  () => props.maxDates,
  (maxDates) => {
    if (selected.size > maxDates) {
      const trimmed = Array.from(selected).slice(0, Math.max(0, maxDates));
      selected.clear();
      trimmed.forEach((key) => selected.add(key));
    }
  },
);

const monthsToShow = computed(() => [
  { y: viewYear.value, m: viewMonth.value },
  addMonths(viewYear.value, viewMonth.value, 1),
]);

watch(monthsToShow, (months) => {
  const [fy, fm] = focusKey.value.split("-").map(Number);
  const visible = months.some((v) => v.y === fy && v.m === fm);
  if (!visible) focusKey.value = keyOf(months[0].y, months[0].m, 1);
});

const atCap = computed(() => selected.size >= props.maxDates);
const contrastColor = computed(() => getContrastColor(props.accent));

function goPrev() {
  const v = addMonths(viewYear.value, viewMonth.value, -1);
  viewYear.value = v.y;
  viewMonth.value = v.m;
}
function goNext() {
  const v = addMonths(viewYear.value, viewMonth.value, 1);
  viewYear.value = v.y;
  viewMonth.value = v.m;
}

function toggle(key: string, disabled: boolean) {
  if (disabled) return;
  if (selected.has(key)) {
    selected.delete(key);
  } else {
    if (selected.size >= props.maxDates) return;
    selected.add(key);
  }
  focusKey.value = key;
}

function onKeyDown(event: KeyboardEvent, y: number, m: number, d: number) {
  let deltaDays = 0;
  if (event.key === "ArrowLeft") deltaDays = -1;
  else if (event.key === "ArrowRight") deltaDays = 1;
  else if (event.key === "ArrowUp") deltaDays = -7;
  else if (event.key === "ArrowDown") deltaDays = 7;
  else return;
  event.preventDefault();
  const base = new Date(y, m - 1, d);
  base.setDate(base.getDate() + deltaDays);
  const ny = base.getFullYear();
  const nm = base.getMonth() + 1;
  const nd = base.getDate();
  const visible = monthsToShow.value.some((v) => v.y === ny && v.m === nm);
  if (!visible) return;
  const nextKey = keyOf(ny, nm, nd);
  focusKey.value = nextKey;
  requestAnimationFrame(() => {
    dayRefs.get(nextKey)?.focus();
  });
}
</script>

<template>
  <div class="mdp">
    <div class="mdp__header">
      <button type="button" class="mdp__nav" aria-label="Show previous month" @click="goPrev">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M15 6l-6 6 6 6" />
        </svg>
      </button>
      <div class="mdp__labels">
        <span v-for="v in monthsToShow" :key="`${v.y}-${v.m}`" class="mdp__label">{{ monthLabel(v.y, v.m) }}</span>
      </div>
      <button type="button" class="mdp__nav" aria-label="Show next month" @click="goNext">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 6l6 6-6 6" />
        </svg>
      </button>
    </div>
    <div class="mdp__grids">
      <div v-for="v in monthsToShow" :key="`grid-${v.y}-${v.m}`" class="mdp__grid">
        <div class="mdp__weekdays">
          <div v-for="w in WEEKDAYS" :key="w" class="mdp__weekday">{{ w }}</div>
        </div>
        <div class="mdp__days">
          <template v-for="(d, i) in buildCells(v.y, v.m)" :key="d === null ? `blank-${v.y}-${v.m}-${i}` : keyOf(v.y, v.m, d)">
            <div v-if="d === null" class="mdp__blank" aria-hidden="true" />
            <button
              v-else
              type="button"
              :ref="(el) => setDayRef(keyOf(v.y, v.m, d), el)"
              class="mdp__day"
              :class="{ 'mdp__day--disabled': !selected.has(keyOf(v.y, v.m, d)) && atCap }"
              :tabindex="keyOf(v.y, v.m, d) === focusKey ? 0 : -1"
              :aria-pressed="selected.has(keyOf(v.y, v.m, d))"
              :aria-disabled="!selected.has(keyOf(v.y, v.m, d)) && atCap ? true : undefined"
              :aria-label="`${MONTH_NAMES[v.m - 1]} ${d}, ${v.y}${selected.has(keyOf(v.y, v.m, d)) ? ', selected' : ''}`"
              :style="selected.has(keyOf(v.y, v.m, d)) ? { background: accent, color: contrastColor } : undefined"
              @click="toggle(keyOf(v.y, v.m, d), !selected.has(keyOf(v.y, v.m, d)) && atCap)"
              @keydown="onKeyDown($event, v.y, v.m, d)"
            >
              {{ d }}
            </button>
          </template>
        </div>
      </div>
    </div>
    <div class="mdp__footer">
      <span>{{ selected.size }} of {{ maxDates }} selected</span>
      <span v-if="atCap" class="mdp__badge" :style="{ background: `${accent}26`, color: accent }">Limit reached</span>
    </div>
  </div>
</template>

<style scoped>
.mdp {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #12141a;
  color: #fff;
  padding: 1.25rem;
  font-family: system-ui, sans-serif;
}
.mdp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.mdp__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: transparent;
  color: rgb(255 255 255 / 0.6);
  cursor: pointer;
  outline: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.mdp__nav:hover {
  border-color: rgb(255 255 255 / 0.25);
  color: #fff;
}
.mdp__nav:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
}
.mdp__labels {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.mdp__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.85);
}
.mdp__grids {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}
@media (min-width: 640px) {
  .mdp__grids {
    grid-template-columns: 1fr 1fr;
  }
}
.mdp__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.35);
}
.mdp__weekday {
  padding-bottom: 0.5rem;
}
.mdp__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  row-gap: 0.25rem;
}
.mdp__blank,
.mdp__day {
  height: 2.25rem;
  width: 2.25rem;
}
.mdp__day {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.mdp__day:hover:not(.mdp__day--disabled) {
  background: rgb(255 255 255 / 0.1);
}
.mdp__day:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
}
.mdp__day--disabled {
  color: rgb(255 255 255 / 0.25);
  cursor: not-allowed;
}
.mdp__footer {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.45);
}
.mdp__badge {
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .mdp__day {
    transition: none;
  }
}
</style>

Nearby