import type { Meta, StoryObj } from '@storybook/html';
import { ColorPicker, type ColorPickerOptions } from '@42/core/color-picker';
import '@42/styles/color-picker.css';

const meta: Meta<ColorPickerOptions> = {
  title: 'Core/Inputs & Forms/ColorPicker',
  tags: ['autodocs'],
  argTypes: {
    defaultValue: { control: 'color' },
    placement: {
      control: 'select',
      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
    },
  },
  args: { defaultValue: '#4f46e5', placement: 'bottom-start' },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Colorpicker = '';
    root.innerHTML = `
      <button data-c42-colorpicker-trigger>
        <span data-c42-colorpicker-swatch></span>
        <span data-c42-colorpicker-value></span>
      </button>
      <div data-c42-colorpicker-panel>
        <input data-c42-colorpicker-color type="color" aria-label="Pick a color" />
        <input data-c42-colorpicker-hex type="text" maxlength="7" aria-label="Hex value" />
      </div>`;
    new ColorPicker(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<ColorPickerOptions>;

export const Default: Story = {};