import type { Meta, StoryObj } from '@storybook/html';
import { DatePicker, type DatePickerOptions } from '@42/core/date-picker';
import '@42/styles/date-picker.css';

const meta: Meta<DatePickerOptions> = {
  title: 'Core/Inputs & Forms/DatePicker',
  tags: ['autodocs'],
  argTypes: {
    weekStartsOn: { control: { type: 'number', min: 0, max: 6 } },
    locale: { control: 'text' },
    placeholder: { control: 'text' },
    closeOnSelect: { control: 'boolean' },
    placement: {
      control: 'select',
      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
    },
  },
  args: {
    weekStartsOn: 1,
    locale: 'en-US',
    placeholder: 'Select a date',
    closeOnSelect: true,
    placement: 'bottom-start',
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Datepicker = '';
    root.innerHTML = `
      <button data-c42-datepicker-trigger>
        <span data-c42-datepicker-value></span>
      </button>
      <div data-c42-datepicker-panel>
        <div>
          <button data-c42-datepicker-prev aria-label="Previous month">‹</button>
          <span data-c42-datepicker-label></span>
          <button data-c42-datepicker-next aria-label="Next month">›</button>
        </div>
        <div data-c42-datepicker-grid></div>
      </div>`;
    new DatePicker(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<DatePickerOptions>;

export const Default: Story = {};

export const WithDefaultValue: Story = {
  args: { defaultValue: new Date().toISOString().slice(0, 10) },
};

export const Ranged: Story = {
  args: {
    min: new Date(Date.now() - 5 * 86400000).toISOString().slice(0, 10),
    max: new Date(Date.now() + 10 * 86400000).toISOString().slice(0, 10),
  },
};

export const RangeSelection: Story = {
  args: {
    mode: 'range',
    placeholder: 'Select date range',
    closeOnSelect: true,
  } as DatePickerOptions,
};