import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { MOONBIRDS_ITEM } from "../../constants/story"
import { Button } from "../Button"
import { FlexColumn } from "../FlexColumn"
import { Modal } from "../Modal"
import { SpaceBetween } from "../SpaceBetween"
import { Text } from "../Text"
import { TakeoverModal } from "./TakeoverModal"

type Story = StoryObj<typeof TakeoverModal>

const meta: Meta<typeof TakeoverModal> = {
  title: "Design System/TakeoverModal",
  component: TakeoverModal,
  parameters: {
    layout: "fullscreen",
  },
  args: {
    content: (
      <>
        <TakeoverModal.Header className="gap-3">
          <Button variant="secondary">Back</Button>
          <Text.Heading size="sm">Header</Text.Heading>
          <Button variant="secondary">Next</Button>
        </TakeoverModal.Header>
        <TakeoverModal.Body>Body content</TakeoverModal.Body>
      </>
    ),
    children: <Button>Open Modal</Button>,
  },
}

export default meta

export const Uncontrolled: Story = {}

export const OnlyFadeOut: Story = {
  args: {
    animation: "out",
  },
}

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

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

export const WithoutCloseIcon: Story = {
  args: {
    open: true,
    children: null,
    withCloseIcon: false,
  },
}

export const Transparent: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
        <FlexColumn>
          <Text.Body>
            Adding this image so you can see the overlay transparency
          </Text.Body>
          <img
            className="aspect-square max-w-[500px] object-cover"
            src={MOONBIRDS_ITEM}
          />
        </FlexColumn>

        <TakeoverModal
          content={meta.args?.content}
          open={isOpen}
          transparent
          onOpenChange={setIsOpen}
        />
      </>
    )
  },
}

// Render another modal within this modal
export const NestedModal: Story = {
  args: {
    content: (
      <>
        <TakeoverModal.Header>
          <Text.Heading size="sm">Header</Text.Heading>
        </TakeoverModal.Header>
        <TakeoverModal.Body>
          <Modal
            content={
              <>
                <Modal.Header>
                  <Modal.Header.Title>Nested modal title</Modal.Header.Title>
                </Modal.Header>
                <Modal.Body>Nested modal body content</Modal.Body>
              </>
            }
          >
            <Button>Open nested modal</Button>
          </Modal>
        </TakeoverModal.Body>
      </>
    ),
  },
}

export const OverflowBody: Story = {
  args: {
    content: (
      <>
        <TakeoverModal.Header>
          <Text.Heading size="sm">Header</Text.Heading>
        </TakeoverModal.Header>
        <TakeoverModal.Body className="h-[200vh]">
          <SpaceBetween className="h-full flex-col">
            <div className="sticky top-[96px] z-[1]">Body content</div>
            <div>End of body content</div>
          </SpaceBetween>
        </TakeoverModal.Body>
      </>
    ),
  },
}