import { faker } from "@faker-js/faker"
import {
  generateEvmAddress,
  truncateAddress,
} from "@opensea/testing-utils/address"
import { wait } from "@opensea/testing-utils/wait"
import { StoryObj, StoryFn, Meta } from "@storybook/react"
import { addSeconds } from "date-fns"
import { list } from "radash"
import React, { useEffect, useState } from "react"
import {
  useCallbackRef,
  useRelativeTimeFormatter,
  useItemsWithSkeletons,
} from "../../hooks"
import { Satellite } from "../../icons"
import { classNames } from "../../utils"
import { Item } from "../Item"
import { SideModule } from "../SideModule"
import { Skeleton } from "../Skeleton"
import { tableRowSizeVariants, useTable } from "../Table"
import { TableColumnSort } from "../Table/TableHeaderCell"
import { Text } from "../Text"
import {
  VirtualizedTable,
  VirtualizedTableProps,
  VirtualizedTableWindowModeProps,
} from "./VirtualizedTable"

const PAGE_SIZE = 50

const generateItem = (rowIndex: number) => ({
  key: faker.string.uuid(),
  index: rowIndex,
  primary: faker.string.numeric(),
  secondary: faker.string.numeric(),
  tertiary: faker.string.numeric(),
  quaternary: faker.string.numeric(),
})

type ItemType = ReturnType<typeof generateItem>

const COLUMN_CLASSNAMES = [
  classNames("w-[400px]"),
  classNames("w-[200px]"),
  classNames("w-[400px]"),
  classNames("w-[400px]"),
  classNames("w-[400px]"),
]

const NOOP_PAGINATION = {
  hasNext: false,
  isLoadingNext: false,
  loadNext: () => Promise.resolve(),
}

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

export default meta

type Story = StoryObj<typeof VirtualizedTable<ItemType>>

const stickyClassName = classNames("sticky top-0 z-[1]")

const Template = (args: Partial<VirtualizedTableProps<ItemType>>) => {
  const [items, setItems] = useState(
    list(PAGE_SIZE - 1).map(i => generateItem(i)),
  )
  const [isLoadingNext, setIsLoadingNext] = useState(false)

  const loadNext = async () => {
    setIsLoadingNext(true)
    await wait(500)
    setItems([
      ...items,
      ...list(PAGE_SIZE - 1).map(index => generateItem(items.length + index)),
    ])
    setIsLoadingNext(false)
  }

  const pagination = {
    hasNext: true,
    isLoadingNext,
    loadNext,
    paginationThreshold: 10,
  }

  return (
    <VirtualizedTable
      header={
        <VirtualizedTable.Header className={stickyClassName}>
          <VirtualizedTable.Header.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
            stickyLeft={0}
          >
            Row #
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
          >
            Primary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
          >
            Secondary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
          >
            Tertiary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
          >
            Quaternary
          </VirtualizedTable.Header.Cell>
        </VirtualizedTable.Header>
      }
      itemKey={item => item?.key}
      items={items}
      renderRow={({ item }) => (
        <VirtualizedTable.Row>
          <VirtualizedTable.Row.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
            stickyLeft={0}
          >
            {item.index}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
          >
            {item.primary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
          >
            {item.secondary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
          >
            {item.tertiary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
          >
            {item.quaternary}
          </VirtualizedTable.Row.Cell>
        </VirtualizedTable.Row>
      )}
      {...pagination}
      // making types happy
      {...(args as Partial<VirtualizedTableWindowModeProps<ItemType>>)}
    />
  )
}

export const Sticky: Story = {
  render: Template,
}

export const FixedTableHeight: Story = {
  render: Template,

  args: {
    className: "h-[500px]",
    scrollMode: "table",
  },
}

export const NoScrollBorder: Story = {
  render: Template,

  args: {
    className: "h-[500px]",
    scrollMode: "table",
    headerBorderOnScroll: false,
  },
}

export const NestedTableScrollMode = (
  args: Partial<VirtualizedTableProps<ItemType>> & {
    parentScrollContainer?: boolean
  },
) => {
  const [items, setItems] = useState(
    list(PAGE_SIZE - 1).map(i => generateItem(i)),
  )
  const [isLoadingNext, setIsLoadingNext] = useState(false)

  const loadNext = async () => {
    setIsLoadingNext(true)
    await wait(500)
    setItems([
      ...items,
      ...list(PAGE_SIZE - 1).map(index => generateItem(items.length + index)),
    ])
    setIsLoadingNext(false)
  }

  const pagination = {
    hasNext: true,
    isLoadingNext,
    loadNext,
    paginationThreshold: 10,
  }

  const [containerRef, setContainerREf] = useCallbackRef<HTMLDivElement>()

  return (
    <SideModule className="h-screen" ref={setContainerREf}>
      <SideModule.Section>
        <SideModule.Section.Title>Random content</SideModule.Section.Title>
      </SideModule.Section>
      <SideModule.Section>
        <SideModule.Section.Title>Table</SideModule.Section.Title>

        <VirtualizedTable
          header={
            <VirtualizedTable.Header className={stickyClassName}>
              <VirtualizedTable.Header.Cell
                className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
                stickyLeft={0}
              >
                Row #
              </VirtualizedTable.Header.Cell>
              <VirtualizedTable.Header.Cell
                align="right"
                className={COLUMN_CLASSNAMES[1]}
              >
                Primary
              </VirtualizedTable.Header.Cell>
              <VirtualizedTable.Header.Cell
                align="right"
                className={COLUMN_CLASSNAMES[2]}
              >
                Secondary
              </VirtualizedTable.Header.Cell>
              <VirtualizedTable.Header.Cell
                align="right"
                className={COLUMN_CLASSNAMES[3]}
              >
                Tertiary
              </VirtualizedTable.Header.Cell>
              <VirtualizedTable.Header.Cell
                align="right"
                className={COLUMN_CLASSNAMES[4]}
              >
                Quaternary
              </VirtualizedTable.Header.Cell>
            </VirtualizedTable.Header>
          }
          itemKey={item => item?.key}
          items={items}
          renderRow={({ item }) => (
            <VirtualizedTable.Row>
              <VirtualizedTable.Row.Cell
                className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
                stickyLeft={0}
              >
                {item.index}
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                align="right"
                className={COLUMN_CLASSNAMES[1]}
              >
                {item.primary}
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                align="right"
                className={COLUMN_CLASSNAMES[2]}
              >
                {item.secondary}
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                align="right"
                className={COLUMN_CLASSNAMES[3]}
              >
                {item.tertiary}
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                align="right"
                className={COLUMN_CLASSNAMES[4]}
              >
                {item.quaternary}
              </VirtualizedTable.Row.Cell>
            </VirtualizedTable.Row>
          )}
          scrollContainerRef={containerRef}
          scrollMode="table"
          {...pagination}
          // making types happy
          {...(args as Partial<VirtualizedTableWindowModeProps<ItemType>>)}
        />
      </SideModule.Section>
    </SideModule>
  )
}

export const FitWidth = (args: Partial<VirtualizedTableProps<ItemType>>) => {
  const items = list(PAGE_SIZE - 1).map(i => generateItem(i))

  return (
    <VirtualizedTable
      {...(args as Partial<VirtualizedTableWindowModeProps<ItemType>>)}
      header={
        <VirtualizedTable.Header className={stickyClassName}>
          <VirtualizedTable.Header.Cell className="w-[500px] grow">
            Row #
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell align="right" className="grow">
            Primary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell align="right" className="grow">
            Secondary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell align="right" className="grow">
            Tertiary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell align="right" className="grow">
            Quaternary
          </VirtualizedTable.Header.Cell>
        </VirtualizedTable.Header>
      }
      itemKey={item => item?.key}
      items={items}
      renderRow={({ item }) => (
        <VirtualizedTable.Row>
          <VirtualizedTable.Row.Cell className="w-[500px] grow">
            {item.index}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell align="right" className="grow">
            {item.primary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell align="right" className="grow">
            {item.secondary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell align="right" className="grow">
            {item.tertiary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell align="right" className="grow">
            {item.quaternary}
          </VirtualizedTable.Row.Cell>
        </VirtualizedTable.Row>
      )}
      {...NOOP_PAGINATION}
    />
  )
}

export const WithSortableHeaders: StoryFn = () => {
  const [items, setItems] = useState(
    list(PAGE_SIZE - 1).map(i => generateItem(i)),
  )
  const [isLoadingNext, setIsLoadingNext] = useState(false)
  const sorts = [
    "index",
    "primary",
    "secondary",
    "tertiary",
    "quaternary",
  ] as const
  const [selectedSort, setSelectedSort] =
    useState<TableColumnSort<(typeof sorts)[number]>>()

  const loadNext = async () => {
    setIsLoadingNext(true)
    await wait(500)
    setItems([
      ...items,
      ...list(PAGE_SIZE - 1).map(index => generateItem(items.length + index)),
    ])
    setIsLoadingNext(false)
  }

  const pagination = {
    hasNext: true,
    isLoadingNext,
    loadNext,
    paginationThreshold: 10,
  }

  const sortedItems = [...items].sort((a, b) => {
    if (!selectedSort) {
      return 0
    }

    const [aValue, bValue] = [a[selectedSort.column], b[selectedSort.column]]

    if (aValue === bValue) {
      return 0
    }

    if (selectedSort.order === "asc") {
      return aValue < bValue ? -1 : 1
    }

    return aValue < bValue ? 1 : -1
  })

  return (
    <VirtualizedTable
      header={
        <VirtualizedTable.Header className={stickyClassName}>
          <VirtualizedTable.Header.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
            sort={{
              column: sorts[0],
              onSort: setSelectedSort,
              order:
                selectedSort?.column === sorts[0]
                  ? selectedSort.order
                  : undefined,
            }}
          >
            Row #
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
            sort={{
              column: sorts[1],
              onSort: setSelectedSort,
              order:
                selectedSort?.column === sorts[1]
                  ? selectedSort.order
                  : undefined,
            }}
          >
            Primary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
            sort={{
              column: sorts[2],
              onSort: setSelectedSort,
              order:
                selectedSort?.column === sorts[2]
                  ? selectedSort.order
                  : undefined,
            }}
          >
            Secondary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
            sort={{
              column: sorts[3],
              onSort: setSelectedSort,
              order:
                selectedSort?.column === sorts[3]
                  ? selectedSort.order
                  : undefined,
            }}
          >
            Tertiary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
            sort={{
              column: sorts[4],
              onSort: setSelectedSort,
              order:
                selectedSort?.column === sorts[4]
                  ? selectedSort.order
                  : undefined,
            }}
          >
            Quaternary
          </VirtualizedTable.Header.Cell>
        </VirtualizedTable.Header>
      }
      itemKey={item => item?.key}
      items={sortedItems}
      renderRow={({ item }) => (
        <VirtualizedTable.Row>
          <VirtualizedTable.Row.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
          >
            {item.index}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
          >
            {item.primary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
          >
            {item.secondary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
          >
            {item.tertiary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
          >
            {item.quaternary}
          </VirtualizedTable.Row.Cell>
        </VirtualizedTable.Row>
      )}
      {...pagination}
    />
  )
}

function InteractiveTemplate({
  onRowClick,
  dividers,
}: {
  onRowClick?: () => unknown
  dividers?: boolean
}) {
  const [items, setItems] = useState(
    list(PAGE_SIZE - 1).map(i => generateItem(i)),
  )
  const [isLoadingNext, setIsLoadingNext] = useState(false)

  const loadNext = async () => {
    setIsLoadingNext(true)
    await wait(500)
    setItems([
      ...items,
      ...list(PAGE_SIZE - 1).map(index => generateItem(items.length + index)),
    ])
    setIsLoadingNext(false)
  }

  const pagination = {
    hasNext: true,
    isLoadingNext,
    loadNext,
    paginationThreshold: 10,
  }

  return (
    <VirtualizedTable
      dividers={dividers}
      header={
        <VirtualizedTable.Header className={stickyClassName}>
          <VirtualizedTable.Header.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
          >
            Row #
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
          >
            Primary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
          >
            Secondary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
          >
            Tertiary
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
          >
            Quaternary
          </VirtualizedTable.Header.Cell>
        </VirtualizedTable.Header>
      }
      itemKey={item => item?.key}
      items={items}
      renderRow={({ item }) => (
        <VirtualizedTable.Row
          onClick={() => {
            onRowClick?.()
            setItems(items => items.filter(i => i.index !== item.index))
          }}
        >
          <VirtualizedTable.Row.Cell
            className={classNames("min-w-[250px]", COLUMN_CLASSNAMES[0])}
          >
            {item.index}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[1]}
          >
            {item.primary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[2]}
          >
            {item.secondary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[3]}
          >
            {item.tertiary}
          </VirtualizedTable.Row.Cell>
          <VirtualizedTable.Row.Cell
            align="right"
            className={COLUMN_CLASSNAMES[4]}
          >
            {item.quaternary}
          </VirtualizedTable.Row.Cell>
        </VirtualizedTable.Row>
      )}
      {...pagination}
    />
  )
}

export const Interactive: StoryObj<{
  onRowClick?: () => unknown
  dividers?: boolean
}> = {
  render: InteractiveTemplate,
}

export const InteractiveWithDividers: StoryObj<{
  onRowClick?: () => unknown
  dividers?: boolean
}> = {
  render: InteractiveTemplate,
  args: {
    dividers: true,
  },
}

const startingDate = new Date()

const generateActivity = (rowIndex: number) => {
  return {
    key: faker.string.uuid(),
    event: "Sale",
    name: faker.person.fullName(),
    collectionName: faker.internet.displayName(),
    collectionImage: faker.image.dataUri(),
    value: faker.number.float({ min: 0, max: 10 }),
    from: generateEvmAddress(),
    to: generateEvmAddress(),
    createdDate: addSeconds(startingDate, -rowIndex),
  }
}

const ACTIVITY_COLUMN_CLASSNAMES = [
  classNames("w-[180px]"),
  classNames("w-[300px] grow"),
  classNames("w-[180px]"),
  classNames("w-[180px]"),
  classNames("w-[180px]"),
  classNames("w-[180px]"),
]

const ActivityTemplate = (args: { hasError?: boolean }) => {
  const [activities, setActivities] = useState<
    ReturnType<typeof generateActivity>[]
  >([])
  const [isLoading, setIsLoading] = useState(false)
  const [isLoadingNext, setIsLoadingNext] = useState(false)

  useEffect(() => {
    const loadInitialItems = async () => {
      setIsLoading(true)
      await wait(1000)
      setActivities(list(PAGE_SIZE - 1).map(generateActivity))
      setIsLoading(false)
    }

    loadInitialItems()
  }, [])

  const loadNext = async () => {
    setIsLoadingNext(true)
    await wait(1500)

    if (args.hasError) {
      setIsLoadingNext(false)
      throw new Error("Failed to load next page")
    }

    setActivities([
      ...activities,
      ...list(PAGE_SIZE - 1).map(index =>
        generateActivity(activities.length + index),
      ),
    ])
    setIsLoadingNext(false)
  }

  const pagination = {
    hasNext: true,
    isLoadingNext,
    loadNext,
    paginationThreshold: 10,
  }

  const items = useItemsWithSkeletons({
    items: activities,
    pageSize: PAGE_SIZE,
    isLoading,
    isLoadingNext,
  })
  const format = useRelativeTimeFormatter()

  return (
    <VirtualizedTable
      dividers
      {...args}
      {...pagination}
      header={
        <VirtualizedTable.Header className={stickyClassName}>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[0]}
          >
            Event
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[1]}
          >
            Item
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[2]}
          >
            Value
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[3]}
          >
            From
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[4]}
          >
            To
          </VirtualizedTable.Header.Cell>
          <VirtualizedTable.Header.Cell
            className={ACTIVITY_COLUMN_CLASSNAMES[5]}
          >
            Time
          </VirtualizedTable.Header.Cell>
        </VirtualizedTable.Header>
      }
      itemKey={item => item?.key}
      items={items}
      renderRow={function Render({ item }) {
        const { size } = useTable()
        // Render skeletons whenever item is undefined
        if (item === undefined) {
          return (
            <VirtualizedTable.Row data-testid="skeleton">
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[0]}
              >
                <Skeleton.Line className="w-1/2" />
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[1]}
              >
                <Item variant="unstyled">
                  <Item.Avatar
                    className={tableRowSizeVariants().image({ size })}
                  >
                    <Skeleton.Block className="rounded-lg" />
                  </Item.Avatar>
                  <Item.Content>
                    <Skeleton>
                      <Skeleton.Line className="w-1/2" />
                    </Skeleton>
                  </Item.Content>
                </Item>
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[2]}
              >
                <Skeleton.Line className="w-1/2" />
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[3]}
              >
                <Skeleton.Line className="w-3/4" />
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[4]}
              >
                <Skeleton.Line className="w-3/4" />
              </VirtualizedTable.Row.Cell>
              <VirtualizedTable.Row.Cell
                className={ACTIVITY_COLUMN_CLASSNAMES[5]}
              >
                <Skeleton.Line className="w-1/2" />
              </VirtualizedTable.Row.Cell>
            </VirtualizedTable.Row>
          )
        }

        return (
          <VirtualizedTable.Row>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[0]}
            >
              <Item variant="unstyled">
                <Item.Avatar icon={Satellite} />
                <Item.Content>
                  <Item.Title>Sale</Item.Title>
                </Item.Content>
              </Item>
            </VirtualizedTable.Row.Cell>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[1]}
            >
              <Item variant="unstyled">
                <Item.Avatar
                  className={tableRowSizeVariants().image({ size })}
                  src={item.collectionImage}
                />
                <Item.Content>
                  <Item.Title>{item.name}</Item.Title>
                </Item.Content>
              </Item>
            </VirtualizedTable.Row.Cell>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[2]}
            >
              <Text.Body weight="semibold">
                {item.value.toFixed(3)} ETH
              </Text.Body>
            </VirtualizedTable.Row.Cell>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[3]}
            >
              <Text.Body weight="semibold">
                {truncateAddress(item.from)}
              </Text.Body>
            </VirtualizedTable.Row.Cell>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[4]}
            >
              <Text.Body weight="semibold">
                {truncateAddress(item.to)}
              </Text.Body>
            </VirtualizedTable.Row.Cell>
            <VirtualizedTable.Row.Cell
              className={ACTIVITY_COLUMN_CLASSNAMES[5]}
            >
              <Text.Body weight="semibold">
                {format(item.createdDate)}
              </Text.Body>
            </VirtualizedTable.Row.Cell>
          </VirtualizedTable.Row>
        )
      }}
    />
  )
}

export const Activity: StoryObj<{ hasError?: boolean }> = {
  render: ActivityTemplate,
}

export const ActivityWithError: StoryObj<{ hasError?: boolean }> = {
  render: ActivityTemplate,
  args: {
    hasError: true,
  },
}

export const DuplicateKeys: StoryObj = {
  render: () => {
    return (
      // Should only render 1 row
      <VirtualizedTable
        itemKey={() => "1"}
        items={list(100).map(i => generateItem(i))}
        renderRow={({ item }) => <div>{item.index}</div>}
      />
    )
  },
}