import type { Meta, StoryObj } from '@storybook/html';
import { Calendar, type CalendarOptions } from '@42/core/calendar';
import '@42/styles/calendar.css';

const snippet = `import { Calendar } from '@42/core/calendar';
import '@42/styles/calendar.css';

const calendar = new Calendar(document.querySelector('[data-c42-calendar]')!, {
  view: 'month',
  events: [
    { id: 'e1', title: 'Standup', start: new Date(2026, 5, 16, 9, 0) },
    { id: 'e2', title: 'Release', start: new Date(2026, 5, 24, 14, 0) },
  ],
});

calendar.on('calendar:select', (e) => console.log(e.detail.dateKey));
calendar.on('calendar:eventmove', (e) => console.log(e.detail.id, e.detail.start));`;

function build(): HTMLElement {
  const root = document.createElement('div');
  root.dataset.c42Calendar = '';
  root.innerHTML = `
    <div data-c42-calendar-header>
      <button data-c42-calendar-prev aria-label="Previous period">‹</button>
      <button data-c42-calendar-today>Today</button>
      <button data-c42-calendar-next aria-label="Next period">›</button>
      <span data-c42-calendar-title></span>
      <button data-c42-calendar-view="month">Month</button>
      <button data-c42-calendar-view="week">Week</button>
      <button data-c42-calendar-view="day">Day</button>
    </div>
    <div data-c42-calendar-grid></div>`;
  return root;
}

const SAMPLE_EVENTS = [
  { id: 'e1', title: 'Standup', start: new Date(2026, 5, 16, 9, 0) },
  { id: 'e2', title: 'Design review', start: new Date(2026, 5, 18, 11, 0) },
  { id: 'e3', title: 'Release', start: new Date(2026, 5, 24, 14, 0) },
];

const meta: Meta<CalendarOptions> = {
  title: 'Core/Data & Collections/Calendar',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    view: { control: 'radio', options: ['month', 'week', 'day'] },
    weekStartsOn: { control: { type: 'number', min: 0, max: 6 } },
  },
  args: {
    view: 'month',
    weekStartsOn: 0,
  },
  render: (args) => {
    const root = build();
    new Calendar(root, {
      ...args,
      defaultDate: new Date(2026, 5, 15),
      events: SAMPLE_EVENTS,
    });
    return root;
  },
};

export default meta;

type Story = StoryObj<CalendarOptions>;

export const Month: Story = {};

export const Week: Story = {
  args: { view: 'week' },
};

export const Day: Story = {
  args: { view: 'day' },
};