import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { leftArrow, menu } from "@simplybusiness/icons";
import type { ButtonProps } from "./Button";
import { Button } from "./Button";
import { Icon } from "../Icon";
import { excludeControls } from "../../utils";

import "./Button.story.styles.css";

type StoryType = StoryObj<typeof Button>;

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  excludeStories: ["Counter", "PressButton"],
  argTypes: {
    isLoading: {
      if: {
        arg: "isSuccess",
        truthy: false,
      },
    },
    isSuccess: {
      if: {
        arg: "isLoading",
        truthy: false,
      },
    },
    href: {
      if: {
        arg: "elementType",
        eq: "a",
      },
    },
    rel: {
      if: {
        arg: "elementType",
        eq: "a",
      },
    },
    target: {
      if: {
        arg: "elementType",
        eq: "a",
      },
    },
    type: {
      if: {
        arg: "elementType",
        neq: "a",
      },
    },
    ...excludeControls("role", "children"),
  },
};

export const Default: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Confirm",
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const Secondary: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    variant: "secondary",
    size: "md",
    children: "Secondary Button",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const Ghost: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    variant: "ghost",
    size: "md",
    children: "Ghost Button",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const Basic: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    variant: "basic",
    size: "md",
    children: "Basic Button",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const Large: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Large Button",
    variant: "primary",
    size: "lg",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const AsLinkElement: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Link Button",
    elementType: "a",
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    href: "",
    rel: "",
    target: "",
  },
};

export const WithLinkStyles: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Confirm",
    variant: "link",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const Loading: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Loading",
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: true,
    isSuccess: false,
    type: "button",
  },
};

export const Success: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Success",
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: true,
    type: "button",
  },
};

export const Disabled: StoryType = {
  render: (args: ButtonProps) => <Button {...args} />,
  args: {
    children: "Disabled",
    variant: "primary",
    size: "md",
    isDisabled: true,
    isLoading: false,
    isSuccess: false,
    type: "button",
  },
};

export const WithIconOnTheLeft: StoryType = {
  render: (args: ButtonProps) => {
    return <Button {...args} />;
  },
  args: {
    children: (
      <>
        <Icon icon={leftArrow} />
        Back
      </>
    ),
    variant: "secondary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    className: "button-example-with-icon",
    type: "button",
  },
};

export const WithIconOnTheRight: StoryType = {
  render: (args: ButtonProps) => {
    return <Button {...args} />;
  },
  args: {
    children: (
      <>
        Menu <Icon icon={menu} />
      </>
    ),
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    className: "button-example-with-icon",
    type: "button",
  },
};

export const Themed: StoryType = {
  render: (args: ButtonProps) => {
    return <Button {...args} />;
  },
  args: {
    children: "Confirm",
    variant: "primary",
    size: "md",
    isDisabled: false,
    isLoading: false,
    isSuccess: false,
    className: "button-example-with-theme",
    type: "button",
  },
};

export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
  );
};

export const PressButton = () => {
  const [pressLogs, setPressLogs] = useState<[] | string[]>([]);
  const log = (e: string) => {
    setPressLogs(logs => [...logs.slice(-5), e]);
  };
  return (
    <div>
      <Button onPress={() => log("onPress")}>Press me</Button>
      <ul>
        {pressLogs.map((pressLog, i) => (
          <li key={i}>{pressLog}</li>
        ))}
      </ul>
    </div>
  );
};

export default meta;
