import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
import Stepper from './Stepper';

const STEPS = [
  {
    label: 'One',
    onClick: fn(),
  },
  {
    label: 'Two',
    hoverLabel: (
      <>
        <div>
          <strong>Diana Jaramillo</strong>
        </div>
        dianajarm123@gmail.com
      </>
    ),
    onClick: fn(),
  },
  { label: 'Recipient', onClick: fn() },
  { label: 'Smellification', onClick: fn() },
  { label: 'Battle', onClick: fn() },
];

export default {
  component: Stepper,
  title: 'Navigation/Stepper',
  argTypes: {
    activeStep: {
      control: 'radio',
      options: [...Array(STEPS.length).keys()],
    },
  },
} satisfies Meta<typeof Stepper>;

type Story = StoryObj<typeof Stepper>;

export const Sandbox = createSandboxStory({
  code: `const App = () => {
  const [activeStep, setActiveStep] = React.useState(1);

  return (
    <Stepper
      activeStep={activeStep}
      steps={[
        { label: 'Amount', onClick: () => setActiveStep(0) },
        {
          label: 'You',
          hoverLabel: (
            <>
              <div><strong>Diana Jaramillo</strong></div>
              dianajarm123@gmail.com
            </>
          ),
          onClick: () => setActiveStep(1),
        },
        { label: 'Recipient', onClick: () => setActiveStep(2) },
        { label: 'Review', onClick: () => setActiveStep(3) },
        { label: 'Pay', onClick: () => setActiveStep(4) },
      ]}
    />
  );
};`,
  scope: globalScope,
});

export const Basic: Story = {
  render: ({ activeStep, steps }) => {
    return <Stepper activeStep={activeStep} steps={steps} />;
  },
  args: {
    activeStep: 2,
    steps: STEPS,
  },
};
