import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn, within, expect, screen } from 'storybook/test';
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: 'Three', onClick: fn() },
  { label: 'Four', onClick: fn() },
  { label: 'Five', onClick: fn() },
];

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

type Story = StoryObj<typeof meta>;

export const ProgressbarWidth: Story = {
  play: async ({ step }) => {
    const getBarBaseWidth = (stepIndex: number) => {
      const instance = screen.getByTestId(`stepper${stepIndex}`);
      return within(instance).getByTestId('progress-bar')?.style.width;
    };

    await step('activeStep: -10 (negative) ▸ width should be 0', async () => {
      await expect(getBarBaseWidth(-10)).toBe(`0%`);
    });

    await step('activeStep: 0 ▸ width should be 0', async () => {
      await expect(getBarBaseWidth(0)).toBe(`0%`);
    });

    const WIDTHS = [0, 25, 50, 75, 100];
    // eslint-disable-next-line no-plusplus
    for (let stepIndex = 1; stepIndex < STEPS.length; stepIndex++) {
      await step(
        `activeStep: ${stepIndex} ▸ base width should be ${WIDTHS[stepIndex]}%`,
        async () => {
          await expect(getBarBaseWidth(stepIndex)).toMatch(
            new RegExp(`^calc\\(${WIDTHS[stepIndex]}%.*?`),
          );
        },
      );
    }

    await step('activeStep: 1000 ▸ base width should be 100%', async () => {
      await expect(getBarBaseWidth(1000)).toMatch(/^calc\(100%.*?/);
    });
  },
  render: function Render() {
    return (
      <>
        <Stepper steps={STEPS} activeStep={0} testId="stepper-10" />
        <Stepper steps={STEPS} activeStep={0} testId="stepper0" />
        <Stepper steps={STEPS} activeStep={1} testId="stepper1" />
        <Stepper steps={STEPS} activeStep={2} testId="stepper2" />
        <Stepper steps={STEPS} activeStep={3} testId="stepper3" />
        <Stepper steps={STEPS} activeStep={4} testId="stepper4" />
        <Stepper steps={STEPS} activeStep={4} testId="stepper1000" />
      </>
    );
  },
  args: {
    steps: STEPS,
  },
};