import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { BottomSheet } from "../BottomSheet"
import { Button } from "../Button"
import { SideSheet } from "./SideSheet"

type Story = StoryObj<typeof SideSheet>

const meta: Meta<typeof SideSheet> = {
  title: "Design System/SideSheet",
  component: SideSheet,
  args: {
    content: (
      <>
        <SideSheet.Description />
        <SideSheet.Header>
          <SideSheet.Header.Title>Title content</SideSheet.Header.Title>
        </SideSheet.Header>
        <SideSheet.Body>Body content</SideSheet.Body>
      </>
    ),
    children: <Button>Open sheet</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 sheet</Button>
        <SideSheet
          content={meta.args?.content}
          open={isOpen}
          onOpenChange={setIsOpen}
        />
      </>
    )
  },
}

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

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

export const Right: Story = {
  args: {
    direction: "right",
  },
}

export const WithBottomSheet: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    const [bottomIsOpen, setBottomIsOpen] = useState(false)
    const [container, setContainer] = useState<HTMLElement | null>(null)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Open sheet</Button>
        <SideSheet
          content={
            <div className="h-screen">
              <Button onClick={() => setBottomIsOpen(true)}>Open Bottom</Button>
              <div ref={setContainer} />
              <BottomSheet
                container={container}
                content={
                  <>
                    <BottomSheet.Header>
                      <BottomSheet.Header.Title>
                        Title content
                      </BottomSheet.Header.Title>
                    </BottomSheet.Header>
                    <BottomSheet.Body>Body content</BottomSheet.Body>
                  </>
                }
                open={bottomIsOpen}
                onOpenChange={setBottomIsOpen}
              />
            </div>
          }
          open={isOpen}
          onOpenChange={setIsOpen}
        />
      </>
    )
  },
}