/* eslint-disable react-hooks/rules-of-hooks */
import { useEffect, useState } from "react";
import { Button } from "../button";
import { Flex } from "../flex";
import { InputDeviceProvider } from "../../utils";
import { Text } from "../text";
import { styled } from "../../theme";
import { ProgressBar } from ".";

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

const defaultSteps: React.ComponentProps<typeof ProgressBar>["steps"] = [
  { value: 0, label: "Step One" },
  { value: 1, label: "Step Two" },
  { value: 2, label: "Step Three With Very Very Long Text" },
  { value: 3, label: "Step Four Medium" },
  { value: 4, label: "Step Five Medium" },
  { value: 5, label: "Step Six Medium" },
];

const threeSteps: React.ComponentProps<typeof ProgressBar>["steps"] = [
  { value: 0, label: "Step One" },
  { value: 1, label: "Step Two" },
  { value: 2, label: "Step Three" },
];

const meta: Meta<typeof ProgressBar> = {
  title: "Progress Bar",
  component: ProgressBar,
  tags: ["autodocs"],
  args: {
    steps: defaultSteps,
    value: 0,
    ariaLabel: "Stepper List",
  },
  decorators: [
    (Story) => (
      <InputDeviceProvider>
        <Story />
      </InputDeviceProvider>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof ProgressBar>;

const MiniCheckbox = styled("label", {
  display: "flex",

  "input + *::before": {
    content: "",
    display: "inline-block",
    width: "16px",
    height: "16px",
    border: "1px solid white",
    borderRadius: "$s",
    mr: "$1",
  },

  "input:checked + *::before": {
    content: "x",
    lineHeight: "14px",
  },
});

export const Default: Story = {
  // eslint-disable-next-line max-lines-per-function
  render: (args) => {
    const [step, setStep] = useState(args.value);
    useEffect(() => {
      setStep(args.value);
    }, [args.value]);

    const [wrap, setWrap] = useState(false);

    const handleNextStep = () => {
      setStep((prev) => {
        const newStep = Number(prev) + 1;
        return newStep <= 0
          ? 0
          : newStep >= defaultSteps.length - 1
          ? defaultSteps.length - 1
          : newStep;
      });
    };
    const handlePrevStep = () => {
      setStep((prev) => {
        const newStep = Number(prev) - 1;
        return newStep <= 0
          ? 0
          : newStep >= defaultSteps.length - 1
          ? defaultSteps.length - 1
          : newStep;
      });
    };

    const content = (
      <Flex direction="column">
        <ProgressBar {...args} value={step} />
        <Flex gap="2">
          <Button css={{ flex: 1 }} onClick={handlePrevStep}>
            Previous
          </Button>
          <Button css={{ flex: 1 }} onClick={handleNextStep}>
            Next
          </Button>
        </Flex>
        <Flex gap="2" css={{ mt: "$2" }}>
          <MiniCheckbox>
            <input type="checkbox" checked={wrap} onChange={() => setWrap((w) => !w)} />
            <Text css={{ color: "$light-off-white" }}>Wrap in a container</Text>
          </MiniCheckbox>
        </Flex>
      </Flex>
    );

    return wrap ? (
      <Flex css={{ width: "100%", height: "400px" }} direction="column">
        {Array.from({ length: 50 }).map((_, i) => (
          <Flex
            key={i}
            css={{
              flex: 1,
              height: "100%",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text css={{ color: "$light-off-white" }}>Some content</Text>
          </Flex>
        ))}
        {content}
      </Flex>
    ) : (
      content
    );
  },
};

export const NoScrollbar: Story = {
  args: {
    steps: threeSteps,
    value: 0,
  },
  render: Default.render,
};