import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUStepComponent from '../src/components/AUStepComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/Stepper',
  component: AUStepComponent,
  argTypes: {
    title: {
      table: {
        disable: true,
      }
    },
    children: {
      table: {
        disable: true,
      }
    },
    stepHeadlines: {
      table: {
        disable: true,
      }
    },
    introElement: {
      table: {
        disable: true,
      }
    },
    outroElement: {
      table: {
        disable: true,
      }
    },
    finalIcon: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUStepComponent>;

type Story = StoryObj<typeof AUStepComponent>;

export const Five_Steps: Story = {
  args: {
    step: -1,
    title: 'Dette er en overskrift af hensyn til tilgængelighed',
    children: [
      <p>Step 1</p>,
      <p>Step 2</p>,
      <p>Step 3</p>,
      <p>Step 4</p>,
      <p>Step 5</p>,
    ],
    stepHeadlines: ['Introduction', 'Network connection', 'Sign out devices', 'Change password', 'Update device'],
    introElement: <p>Her begynder vi</p>,
    outroElement: <p>Her slutter vi</p>,
    showFinal: false,
    showSteps: true,
  },
  render: (args) => <AUStepComponent {...args} />,
};

export const Five_Steps_With_Icon: Story = {
  args: {
    step: -1,
    title: 'Dette er en overskrift af hensyn til tilgængelighed',
    children: [
      <p>Step 1</p>,
      <p>Step 2</p>,
      <p>Step 3</p>,
      <p>Step 4</p>,
      <p>Step 5</p>,
    ],
    stepHeadlines: ['Introduction', 'Network connection', 'Sign out devices', 'Change password', 'Update device'],
    introElement: <p>Her begynder vi</p>,
    outroElement: <p>Her slutter vi</p>,
    showFinal: true,
    finalIcon: 'send',
    showSteps: true,
  },
  render: (args) => <AUStepComponent {...args} />,
};