import type { Meta, StoryObj } from "@storybook/react";
import { cross, tick } from "@simplybusiness/icons";
import { Icon, Text } from "../index";
import type { ListProps } from ".";
import { List, ListItem } from ".";
import { excludeControls } from "../../utils";

type StoryType = StoryObj<typeof List>;

const meta: Meta<typeof List> = {
  title: "Components/List",
  component: List,
  argTypes: {
    liststyletype: {
      control: { type: "radio" },
      if: {
        arg: "isOrdered",
        truthy: false,
      },
    },
    isReversed: {
      if: {
        arg: "isOrdered",
      },
    },
    start: {
      if: {
        arg: "isOrdered",
      },
    },
    ...excludeControls("icon"),
  },
};

export const Unordered: StoryType = {
  render: (args: ListProps) => (
    <List {...args}>
      <ListItem>Foo</ListItem>
      <ListItem>Bar</ListItem>
      <ListItem>Baz</ListItem>
    </List>
  ),
  args: {
    isOrdered: false,
    isReversed: false,
    liststyletype: "disc",
  },
};

export const Ordered: StoryType = {
  render: (args: ListProps) => (
    <List {...args}>
      <ListItem>Foo</ListItem>
      <ListItem>Bar</ListItem>
      <ListItem>Baz</ListItem>
    </List>
  ),
  args: {
    isOrdered: true,
    isReversed: false,
    start: 1,
  },
};

export const StartingFromASpecificNumber: StoryType = {
  render: (args: ListProps) => (
    <List {...args}>
      <ListItem>Foo</ListItem>
      <ListItem>Bar</ListItem>
      <ListItem>Baz</ListItem>
    </List>
  ),
  args: {
    isOrdered: true,
    start: 12,
    isReversed: false,
  },
  parameters: {
    controls: {
      exclude: ["liststyletype"],
    },
  },
};

export const Reversed: StoryType = {
  render: (args: ListProps) => (
    <List {...args}>
      <ListItem>Foo</ListItem>
      <ListItem>Bar</ListItem>
      <ListItem>Baz</ListItem>
    </List>
  ),
  args: {
    isOrdered: true,
    isReversed: true,
    start: 3,
  },
  parameters: {
    controls: {
      exclude: ["liststyletype"],
    },
  },
};

export const WithCustomIcons: StoryType = {
  render: (args: ListProps) => (
    <List {...args}>
      <ListItem>
        <Text variant="body" spacing="tight">
          Morbi eget sapien nulla. Mauris sodales est vel ullamcorper efficitur.
          Nam lobortis metus et ultricies imperdiet. Phasellus at sapien
          pharetra, commodo lorem eu, malesuada dui. Curabitur vulputate massa
          nec massa blandit, auctor elementum dolor ultricies.
        </Text>
      </ListItem>
      <ListItem icon={<Icon icon={cross} color="red" />}>
        Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
        id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
        felis a mattis pharetra. Pellentesque habitant morbi tristique senectus
        et netus et malesuada fames ac turpis egestas. Donec venenatis tristique
        condimentum.
      </ListItem>
      <ListItem>
        Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum eget
        egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum et
        malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit amet
        neque tempor, vestibulum eros ut, vulputate quam.
      </ListItem>
    </List>
  ),
  args: {
    icon: <Icon icon={tick} color="green" />,
  },
  parameters: {
    controls: {
      exclude: ["isOrdered", "liststyletype"],
    },
  },
};

export default meta;
