import { Meta, StoryObj } from "@storybook/react"
import { list } from "radash"
import React, { useState } from "react"
import { Button } from "../Button"
import { RadioButtonGroup } from "../RadioButtonGroup"
import { Switch } from "../Switch"
import { Modal } from "./Modal"

type Story = StoryObj<typeof Modal>

const meta: Meta<typeof Modal> = {
  title: "Design System/Modal",
  component: Modal,
  args: {
    content: (
      <>
        <Modal.Header>
          <Modal.Header.Title>Title content</Modal.Header.Title>
        </Modal.Header>
        <Modal.Body>Body content</Modal.Body>
      </>
    ),
    children: <Button>Open Modal</Button>,
  },
}

export default meta

export const Uncontrolled: Story = {}

export const Controlled: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
        <Modal
          content={meta.args?.content}
          open={isOpen}
          onOpenChange={setIsOpen}
        />
      </>
    )
  },
}

export const InitiallyOpen: Story = {
  args: {
    open: true,
    children: null,
  },
}

export const NoCloseIcon: Story = {
  args: {
    withCloseIcon: false,
  },
}

export const WithFooter: Story = {
  args: {
    content: (
      <>
        <Modal.Header>
          <Modal.Header.Title>Title content</Modal.Header.Title>
        </Modal.Header>
        <Modal.Body>Body content</Modal.Body>
        <Modal.Footer>
          <Modal.Footer.Button>Buy now</Modal.Footer.Button>
        </Modal.Footer>
      </>
    ),
  },
}

export const WithChangingHeight: Story = {
  render: function Render() {
    const [lines, setLines] = useState(1)

    return (
      <>
        <Modal
          content={
            <>
              <Modal.Header>
                <Modal.Header.Title>Title content</Modal.Header.Title>
              </Modal.Header>
              <Modal.Body>
                {list(1, lines).map(i => {
                  return <p key={i}>Body content</p>
                })}
              </Modal.Body>
              <Modal.Footer>
                <Modal.Footer.Button
                  onClick={() => {
                    setLines(lines + 3)
                  }}
                >
                  Add lines
                </Modal.Footer.Button>
                <Modal.Footer.Button onClick={() => setLines(lines - 3)}>
                  Remove lines
                </Modal.Footer.Button>
              </Modal.Footer>
            </>
          }
          open
        />
      </>
    )
  },
}

export const OnlyBody: Story = {
  args: {
    content: (
      <Modal.Body>
        <div>Hello!</div>
        <div>Hi world!</div>
        <div>Hello world!</div>
      </Modal.Body>
    ),
  },
}

export const WithHeroMedia: Story = {
  args: {
    content: (
      <>
        <Modal.Header variant="heroMedia">
          <div className="mb-6">
            <Switch />
          </div>
          <Modal.Header.Title>
            A new OpenSea that caters to you
          </Modal.Header.Title>
        </Modal.Header>
        <Modal.Body>
          <RadioButtonGroup value="collector">
            <RadioButtonGroup.Item value="collector">
              <RadioButtonGroup.Item.Content>
                <RadioButtonGroup.Item.Title>
                  Collector
                </RadioButtonGroup.Item.Title>
                <RadioButtonGroup.Item.Description>
                  The simple way to discover, buy, and sell NFTs.
                </RadioButtonGroup.Item.Description>
              </RadioButtonGroup.Item.Content>
            </RadioButtonGroup.Item>

            <RadioButtonGroup.Item value="advanced">
              <RadioButtonGroup.Item.Content>
                <RadioButtonGroup.Item.Title>
                  Advanced
                </RadioButtonGroup.Item.Title>
                <RadioButtonGroup.Item.Description>
                  Advanced tools and analytics for NFT pros.
                </RadioButtonGroup.Item.Description>
              </RadioButtonGroup.Item.Content>
            </RadioButtonGroup.Item>
          </RadioButtonGroup>
        </Modal.Body>
        <Modal.Footer>
          <Modal.Footer.Button>Continue</Modal.Footer.Button>
        </Modal.Footer>
      </>
    ),
  },
}