import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Markdown } from "../Markdown"
import { TextOverflow, TextOverflowProps } from "./TextOverflow"

type Story = StoryObj<typeof TextOverflow>

const meta: Meta<typeof TextOverflow> = {
  title: "Design System/TextOverflow",
  component: TextOverflow,
  args: {
    children: `
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    h2
    h3

    h4
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    1Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    2Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.Donec euismod, nisl eget ultricies ultrices, nunc nisl aliquam nunc, vitae aliquam.`,
  },
}

export default meta

export const Default: Story = {}

export const Inline: Story = {
  args: {
    inlineSeeMore: true,
  },
}

export const TwoLines: Story = {
  args: {
    lines: 2,
  },
}

export const TwoLinesInline: Story = {
  args: {
    lines: 2,
    inlineSeeMore: true,
  },
}

export const ThreeLines: Story = {
  args: {
    lines: 3,
  },
}

export const ThreeLinesInline: Story = {
  args: {
    lines: 3,
    inlineSeeMore: true,
  },
}

export const Controlled: Story = {
  args: {
    open: true,
    onOpenChange: open => alert(`Open: ${open}`),
  },
}

export const WithMarkdown: Story = {
  args: {
    inlineSeeMore: true,
    lines: 1,
    children: (
      <Markdown>
        Moonbirds is the art collectors PFP. Each of the 10,000 digital artworks
        in the collection grants holders access to unique experiences to connect
        with artists and own and champion their art. As a community, Moonbirds
        is a home for creatives, dreamers, and collectors seeking real
        connection as we all contribute to the future of web3 art, culture, and
        technology. Moonbird art is entirely in-chain, meaning the images are
        outputted directly from the smart contract, with no need for storage on
        IPFS or the like. There are also a number of customisable backgrounds
        available to holders based on their on-chain activity (such as other NFT
        holdings)—which disappear when the bird is transferred. You can check
        what each bird looks like with the different backgrounds (and see if
        they have any unclaimed rewards!) on our
        [site](https://proof.xyz/moonbirds)
      </Markdown>
    ),
  },
}

export const CollectionDescription: Story = {
  render: function Render() {
    return (
      <div className="max-w-[50%]">
        <TextOverflow inlineSeeMore lines={2}>
          <Markdown>
            The MUTANT APE YACHT CLUB is a collection of up to 20,000 Mutant
            Apes that can only be created by exposing an existing Bored Ape to a
            vial of MUTANT SERUM or by minting a Mutant Ape in the public sale.
          </Markdown>
        </TextOverflow>
      </div>
    )
  },
}

export const Azuki: Story = {
  render: function Render() {
    return (
      <div className="max-w-[50%]">
        <TextOverflow inlineSeeMore lines={1}>
          <Markdown>
            {`Take the red bean to join the garden. View the collection
            at&nbsp;[azuki.com/gallery](https://azuki.com/gallery).\r\n\r\nAzuki
            starts with a collection of 10,000 avatars that give you membership
            access to The Garden: a corner of the internet where artists,
            builders, and web3 enthusiasts meet to create a decentralized
            future. Azuki holders receive access to exclusive drops,
            experiences, and more. Visit [azuki.com](https://azuki.com) for more
            details.\r\n\r\nWe rise together. We build together. We grow
            together.`}
          </Markdown>
        </TextOverflow>
      </div>
    )
  },
}

export const ListItemCollectionDescription: Story = {
  render: function Render() {
    const description = `**Customised version** of Posers - the first on-chain PFP on POS

- [x] Can be used as a NFT avatar on Twitter, Instagram, etc
- [x] Can be customised for your own
- [x] New Traits will be added periodically to various events

You can customize your original Poser here:
[Customizer](https://tools.posers.app/customizer)

**[Posers](https://opensea.io/collection/posersnft) are the first on-chain PFP collection minted since the Ethereum Network transitioned from Proof of Work to Proof of Stake.

[Medium article](https://medium.com/@poserscollection/posers-dfc4e8db50f2)

POSers are 5000 fancy dudes living on the blockchain. They're cool, they're diverse, they're pixelated, they're ON-CHAIN! Who are you - Human, Ape, Vampire, or Alien?

❗️ You can own either a customised or original version of the poser at the same time❗️

**If you sell, you lose both version**`

    return (
      <div className="max-w-[50%]">
        <TextOverflow inlineSeeMore lines={2}>
          <Markdown>{description}</Markdown>
        </TextOverflow>
      </div>
    )
  },
}

const markdown = `[MekaApes Game ](https://opensea.io/collection/mekaapes) out Now!!

Every Baby Ooga & Incubator can claim a MekaApe once! Check out if a Baby Ooga already claimed a MekaApe [here!](https://app.oogaverse.com/claim) Join our [Discord](https://discord.gg/oogaversenft) to find out more. Old Collection: [SpaceApes](https://opensea.io/collection/spaceapes) Find all information about the Migration and the name change in this [Medium article](https://md.com/@OogaVerse/spaceapes-nft-contract-migration-to-oogaverse-7889fdfa980d). OogaVerse is an NFT collection of 2,000 Genesis Oogas and 6,000 Baby Oogas. Baby Oogas can be bred by holding 2 Genesis Oogas! (Breeding is live now!) `

export const TruncateAtWord: Story = {
  args: {
    inlineSeeMore: true,
    lines: 1,
    children: <Markdown>{markdown}</Markdown>,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <TextOverflow {...(meta.args as TextOverflowProps)} {...Default.args} />
        <TextOverflow {...(meta.args as TextOverflowProps)} {...Inline.args} />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...TwoLines.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...TwoLinesInline.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...ThreeLines.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...ThreeLinesInline.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...Controlled.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...WithMarkdown.args}
        />
        <TextOverflow
          {...(meta.args as TextOverflowProps)}
          {...TruncateAtWord.args}
        />
      </TestGridContainer>
    )
  },
}