import type { Meta, StoryObj } from '@storybook/html';
import { TimePicker, type TimePickerOptions } from '@42/core/time-picker';
import '@42/styles/time-picker.css';

const meta: Meta<TimePickerOptions> = {
  title: 'Core/Inputs & Forms/TimePicker',
  tags: ['autodocs'],
  argTypes: {
    format: { control: 'inline-radio', options: ['12h', '24h'] },
    minuteStep: { control: { type: 'number', min: 1, max: 30 } },
    placeholder: { control: 'text' },
    closeOnConfirm: { control: 'boolean' },
  },
  args: {
    format: '12h',
    minuteStep: 1,
    placeholder: 'Select a time',
    closeOnConfirm: true,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Timepicker = '';
    root.innerHTML = `
      <button data-c42-timepicker-trigger>
        <span data-c42-timepicker-value></span>
      </button>
      <div data-c42-timepicker-panel>
        <input data-c42-timepicker-hour inputmode="numeric" aria-label="Hour" />
        <span>:</span>
        <input data-c42-timepicker-minute inputmode="numeric" aria-label="Minute" />
        <button data-c42-timepicker-period>AM</button>
        <button data-c42-timepicker-cancel>Cancel</button>
        <button data-c42-timepicker-confirm>OK</button>
      </div>`;
    new TimePicker(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<TimePickerOptions>;

export const Default: Story = {};
export const TwentyFourHour: Story = { args: { format: '24h', defaultValue: '14:30' } };
export const QuarterSteps: Story = { args: { format: '24h', minuteStep: 15 } };