import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import {
  IconComponent,
  AwardStar,
  ZoomIn,
  YourTrips,
  Favorite,
  FeatureSearch,
  FeaturedVideo,
  ZoomOut,
  YoutubeActivity,
} from "../../icons"
import { ItemProps } from "../Item"
import { SpaceBetween } from "../SpaceBetween"
import { List, ListProps } from "./List"
import { ListHeaderProps } from "./ListHeader"

type Story = StoryObj<typeof BasicTemplate>

const meta: Meta<typeof List> = {
  title: "Design System/List",
  component: List,
}

export default meta

const icons: IconComponent[] = [
  AwardStar,
  ZoomIn,
  YourTrips,
  Favorite,
  FeatureSearch,
  FeaturedVideo,
  ZoomOut,
  YoutubeActivity,
]

type BasicTemplateProps = ListProps & {
  showHeader?: boolean
  headerProps?: ListHeaderProps
  itemProps?: ItemProps
}

const BasicTemplate = ({
  showHeader,
  headerProps,
  itemProps,
  ...rest
}: BasicTemplateProps) => {
  return (
    <List {...rest}>
      {showHeader && (
        <List.Header {...headerProps}>
          <List.Header.Title>Wallet</List.Header.Title>
          <List.Header.Title>Balance</List.Header.Title>
        </List.Header>
      )}
      {icons.map(icon => (
        <List.Item key={icon.displayName} {...itemProps}>
          <List.Item.Avatar icon={icon} />
          <List.Item.Content>
            <List.Item.Title className="first-letter:capitalize">
              {icon.displayName}
            </List.Item.Title>
            <List.Item.Description>Description</List.Item.Description>
          </List.Item.Content>
          <List.Item.Side>
            <List.Item.Title>0</List.Item.Title>
            <List.Item.Description>0 USD</List.Item.Description>
          </List.Item.Side>
        </List.Item>
      ))}
    </List>
  )
}

export const Base: Story = {
  render: BasicTemplate,
}

export const NoBorder: Story = {
  render: BasicTemplate,
  args: {
    showBorder: false,
  },
}

export const Framed: Story = {
  render: BasicTemplate,
  args: {
    variant: "framed",
  },
}

export const Clickable = {
  render: BasicTemplate,
  args: {
    itemProps: {
      onClick: () => {},
    },
  },
}

export const WithHeader: Story = {
  render: BasicTemplate,
  args: {
    showHeader: true,
  },
}

export const WithFixedHeight: Story = {
  render: BasicTemplate,
  args: {
    height: 600,
    showHeader: true,
  },
}

const TRAITS = [
  {
    traitName: "Body",
    traitValues: [
      { value: "Blue Cat Skin", rarity: "100%", floor: "1.01 ETH" },
    ],
  },
  {
    traitName: "Face",
    traitValues: [
      { value: "Alien", rarity: "0.01%", floor: "---" },
      { value: "Angel", rarity: "0.01%", floor: "---" },
      { value: "Angry", rarity: "2%", floor: "2.99 ETH" },
      { value: "Angry Cute", rarity: "3%", floor: "2.7 ETH" },
      { value: "Angry Scar", rarity: "2%", floor: "3.75 ETH" },
      { value: "Beard Brown", rarity: "2%", floor: "3.7 ETH" },
      { value: "Beard Pirate", rarity: "3%", floor: "4 ETH" },
      { value: "Beard Tan", rarity: "2%", floor: "3.01 ETH" },
      { value: "Celestial", rarity: "0.01%", floor: "---" },
      { value: "Demon", rarity: "0.01%", floor: "---" },
    ],
  },
]

type GroupsTemplateProps = ListProps & {
  showHeader?: boolean
  clickable?: boolean
  headerProps?: ListHeaderProps
  itemProps?: ItemProps
}
const GroupsTemplate = ({
  showHeader,
  clickable,
  headerProps,
  ...rest
}: GroupsTemplateProps) => {
  return (
    <List {...rest}>
      {showHeader && (
        <List.Header {...headerProps}>
          <List.Header.Title>Trait</List.Header.Title>
          <List.Header.Title>Floor</List.Header.Title>
        </List.Header>
      )}
      {TRAITS.map(({ traitName, traitValues }) => (
        <List.Group groupLabel={traitName} key={traitName}>
          {traitValues.map(({ value, rarity, floor }) => (
            <List.Item key={value} onClick={clickable ? () => {} : undefined}>
              <List.Item.Content>
                <SpaceBetween className="w-full items-baseline">
                  <List.Item.Title>{value}</List.Item.Title>
                  <List.Item.Value>{floor}</List.Item.Value>
                </SpaceBetween>
                <List.Item.Description>{rarity}</List.Item.Description>
              </List.Item.Content>
            </List.Item>
          ))}
        </List.Group>
      ))}
    </List>
  )
}

export const WithGroups: Story = {
  render: function Render() {
    return <GroupsTemplate height={600} showHeader variant="condensed" />
  },
}

export const WithGroupsClickable: Story = {
  render: function Render() {
    return (
      <GroupsTemplate clickable height={600} showHeader variant="condensed" />
    )
  },
}