import type { Meta, StoryObj } from '@storybook/react';

import HorizontalBarsPageChange from "@/components/horizontal-bars-page-change/horizontal-bars-page-change";
import { Button } from "@mui/material";
import { useState } from "react";

const meta: Meta<typeof HorizontalBarsPageChange> = {
  component: HorizontalBarsPageChange,
  argTypes: {
    startColor: { control: "color" },
    endColor: { control: "color" },
    numBars: { control: "number" },
    msDelay: { control: "number" },
    timeout: { control: "number" },
    msTransitionSpeed: { control: "number" },
  }
};

export default meta;
type Story = StoryObj<typeof HorizontalBarsPageChange>;

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const Template = (args) => {
  const [shown, setShown] = useState<boolean>(false);
  return (
    <>
      <HorizontalBarsPageChange
        shown={shown}
        startColor={args.startColor}
        endColor={args.endColor}
        numBars={args.numBars}
        onTransitionEnd={() => setShown(false)}
        msDelay={args.msDelay}
        timeout={args.timeout}
        msTransitionSpeed={args.msTransitionSpeed}
      />
      <Button onClick={() => setShown(true)}>Show Animation</Button>
    </>
  );
};

export const Purple: Story = {
  args: {
    startColor: "#C08DE1",
    endColor: "#593770",
    numBars: 7
  },
  render: (args) => <Template {...args} />
};

export const Sunset: Story = {
  args: {
    startColor: "#db14ea",
    endColor: "#ef802f",
    numBars: 7
  },
  render: (args) => <Template {...args} />
};

export const Solid: Story = {
  args: {
    startColor: "#00ffbb",
    numBars: 7
  },
  render: (args) => <Template {...args} />
};