import type { Meta, StoryObj } from '@storybook/html';
import { Stepper, type StepperOptions } from '@42/core/stepper';
import '@42/styles/stepper.css';
import '@42/styles/button.css';

const meta: Meta<StepperOptions> = {
  title: 'Core/Navigation/Stepper',
  tags: ['autodocs'],
  argTypes: {
    linear: { control: 'boolean' },
  },
  args: { linear: true },
  render: (args) => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <div data-c42-stepper>
        <div data-c42-stepper-step data-value="account">
          <span data-c42-stepper-indicator>1</span>
          <button data-c42-stepper-trigger>Account</button>
          <div data-c42-stepper-panel>Create your account.</div>
        </div>
        <div data-c42-stepper-step data-value="profile">
          <span data-c42-stepper-indicator>2</span>
          <button data-c42-stepper-trigger>Profile</button>
          <div data-c42-stepper-panel>Tell us about yourself.</div>
        </div>
        <div data-c42-stepper-step data-value="review">
          <span data-c42-stepper-indicator>3</span>
          <button data-c42-stepper-trigger>Review</button>
          <div data-c42-stepper-panel>Confirm and submit.</div>
        </div>
        <div data-c42-stepper-step data-value="confirm">
          <span data-c42-stepper-indicator>4</span>
          <button data-c42-stepper-trigger>Confirm</button>
          <div data-c42-stepper-panel>Confirm of confirm.</div>
        </div>
        <div data-c42-stepper-step data-value="Done">
          <span data-c42-stepper-indicator>5</span>
          <button data-c42-stepper-trigger>Done</button>
          <div data-c42-stepper-panel>End.</div>
        </div>
        
      </div>
      <div style="margin-top:1rem;display:flex;gap:.5rem">
        <button class="c42-button" data-variant="secondary" data-prev>Back</button>
        <button class="c42-button" data-next>Next</button>
      </div>`;
    const root = wrapper.querySelector<HTMLElement>('[data-c42-stepper]')!;
    const stepper = new Stepper(root, args);
    wrapper.querySelector<HTMLElement>('[data-next]')!.addEventListener('click', () => stepper.next());
    wrapper.querySelector<HTMLElement>('[data-prev]')!.addEventListener('click', () => stepper.prev());
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<StepperOptions>;

export const Default: Story = {};
export const FreeNavigation: Story = { args: { linear: false } };