import { Text } from "../text";
import { iconButtonSizes, iconButtonVariants } from "../icon-button/icon-button.styled";
import { IconButton } from "../icon-button";
import { Icons } from "../icons";
import { Box } from "../box";
import { Input } from "../input";
import { Dialog } from ".";

import type { Meta, StoryObj } from "@storybook/react";

/**
 * Dialog is a modal component that renders a trigger and content. The content is rendered in a portal and is hidden
 * by default. When the trigger is clicked, the content is shown.
 */
const meta: Meta<typeof Dialog> = {
  title: "Dialog",
  component: Dialog,
  tags: ["autodocs"],
  argTypes: {
    side: {
      options: ["center", "left", "right", "topCenter", "bottomCenter"],
    },
    closeButtonVariant: {
      options: Object.keys(iconButtonVariants),
    },
    closeButtonSize: {
      options: Object.keys(iconButtonSizes),
    },
    closeProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    contentProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    descriptionProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    overlayProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    portalProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    rootProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    titleProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    titleTextProps: {
      table: {
        category: "Anatomy Props",
      },
    },
    triggerProps: {
      table: {
        category: "Anatomy Props",
      },
    },
  },
  args: {
    trigger: <Text css={{ color: "$light-off-white" }}>Open dialog</Text>,
    title: "Dialog Title",
    showCloseButton: true,
  },
};

export default meta;

type Story = StoryObj<typeof Dialog>;

export const Default: Story = {
  render: (args) => (
    <Dialog {...args}>
      <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
    </Dialog>
  ),
};

export const WithStartItem: Story = {
  render: (args) => (
    <Dialog {...args} startItem={<IconButton Icon={<Icons.ArrowLeft />} variant="ghost" />}>
      <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
    </Dialog>
  ),
};

/**
 * The visual container i.e the `StyledContainer` has `transform` applied to it. This can be a problem when children is rendered with `position: fixed` as they will be rendered relative the container rather than the viewport as expected.
 * `nonTransformedContet` is content that is rendered as a sibling to the visual container and is thus not transformed.
 *
 * This can be useful if you want to render a `ToastViewport` inside the Dialog. Keep in mind that the overlay, if enabled, is rendered in a stacking context.
 */
export const WithNonTransformedContent: Story = {
  render: (args) => (
    <Dialog {...args}>
      <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
    </Dialog>
  ),
  args: {
    nonTransformedContent: (
      <Box css={{ border: "1px solid white", bg: "red", position: "fixed" }}>
        <Text css={{ color: "$light-off-white" }}>Non transformed content</Text>
      </Box>
    ),
  },
};

/**
 * This is a little playground for bug hunting.
 */
export const BugsPlayground: Story = {
  render: (args) => (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html:
            "#storybook-root { position: absolute; z-index: 2; inset: 0; pointer-events: auto!important; }",
        }}
      />
      <Box>
        <Text variant="body4" css={{ color: "$off-white-72" }}>
          You should not be able to focus this input if focus trap is enabled. Make sure to disable
          close on click outside!
        </Text>
        <Input label="click here" css={{ background: "white" }} />
      </Box>
      <Dialog {...args} startItem={<IconButton Icon={<Icons.ArrowLeft />} variant="ghost" />}>
        <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
      </Dialog>
    </>
  ),
};