import { html, TemplateResult } from 'lit';
import '../src/nile-dot-stepper';

export default {
  title: 'NileDotStepper',
  component: 'nile-dot-stepper',
  argTypes: {
    total: { control: 'number' },
    current: { control: 'number' },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
    disabled: { control: 'boolean' },
  },
};

interface Story<T> {
  (args: T): TemplateResult;
  args?: Partial<T>;
  argTypes?: Record<string, unknown>;
}

interface ArgTypes {
  total?: number;
  current?: number;
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const Template: Story<ArgTypes> = ({
  total = 5,
  current = 1,
  size = 'md',
  disabled = false,
}: ArgTypes) => html`
  <nile-dot-stepper
    .total=${total}
    .current=${current}
    .size=${size}
    ?disabled=${disabled}
  ></nile-dot-stepper>
`;

export const Default = Template.bind({});
Default.args = {
  total: 5,
  current: 2,
  size: 'md',
};

export const Sizes: Story<ArgTypes> = () => html`
  <div style="display: flex; flex-direction: column; gap: 24px;">
    <nile-dot-stepper .total=${5} .current=${2} size="sm"></nile-dot-stepper>
    <nile-dot-stepper .total=${5} .current=${2} size="md"></nile-dot-stepper>
    <nile-dot-stepper .total=${5} .current=${2} size="lg"></nile-dot-stepper>
  </div>
`;

export const Interactive: Story<ArgTypes> = () => html`
  <nile-dot-stepper
    .total=${6}
    .current=${1}
    size="md"
    @nile-step-change=${(e: CustomEvent<{ value: number }>) => {
      // eslint-disable-next-line no-console
      console.log('nile-step-change', e.detail.value);
    }}
  ></nile-dot-stepper>
`;