import React, { type FC, useState } from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Box, Card } from "@mui/material";
import {
  ThemeProviderWithStyledEngine,
  Dialog,
  Typography,
  Button,
  DialogSection,
  DialogActions,
  Input,
} from "..";
import type { DialogProps } from "../components/dialog/Dialog";
import { theme } from "../theme";

const disabled = {
  table: {
    disable: true,
  },
};

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Feedback/Dialog",
  component: Dialog as FC<DialogProps & AdditionalControls>,
  decorators: [decorator],
  argTypes: {
    long: {
      type: "boolean",
    },
    contentHeight: {
      type: "number",
    },
    isOpen: disabled,
    onClose: disabled,
    ref: disabled,
    children: disabled,
  },
} satisfies Meta<FC<DialogProps & AdditionalControls>>;

export default meta;

interface AdditionalControls {
  contentHeight: number | undefined;
}

const Template: StoryFn<FC<DialogProps & AdditionalControls>> = ({
  isOpen,
  contentHeight,
  children,
  ...args
}) => {
  const [isModalOpen, setIsModalOpen] = useState(isOpen);

  return (
    <>
      <Button onClick={() => setIsModalOpen(true)}>Show Dialog</Button>
      <Dialog
        {...args}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <div
          style={{
            height: contentHeight,
            background: contentHeight !== undefined ? "#f5f5f5" : undefined,
          }}
        >
          <Typography>{children}</Typography>
        </div>
        <DialogActions>
          <Button variant="outlined">Hints</Button>
          <DialogActions.Space />
          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsModalOpen(false)}>Save</Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

const WithOverflowingContentTemplate: StoryFn<typeof Dialog> = ({
  isOpen,
  ...args
}) => {
  const [isModalOpen, setIsModalOpen] = useState(isOpen);

  return (
    <>
      <Button onClick={() => setIsModalOpen(true)}>Show Dialog</Button>
      <Dialog
        {...args}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <Box display="flex" flexDirection="row">
          <Input />
          <Card
            style={{
              boxShadow: theme.shadow.S100,
              marginLeft: "24px",
              padding: "10px",
            }}
          >
            <Typography>I have a shadow</Typography>
          </Card>
        </Box>
        <DialogActions>
          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsModalOpen(false)}>Save</Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

const WithoutActionsTemplate: StoryFn<FC<DialogProps & AdditionalControls>> = ({
  isOpen,
  contentHeight,
  children,
  ...args
}) => {
  const [isModalOpen, setIsModalOpen] = useState(isOpen);

  return (
    <>
      <Button onClick={() => setIsModalOpen(true)}>Show Dialog</Button>
      <Dialog
        {...args}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <div
          style={{
            height: contentHeight,
            background: contentHeight !== undefined ? "#f5f5f5" : undefined,
          }}
        >
          <Typography>{children}</Typography>
        </div>
      </Dialog>
    </>
  );
};

export const Default: StoryFn<FC<DialogProps & AdditionalControls>> =
  Template.bind({});
export const Sectioned: StoryFn<FC<DialogProps & AdditionalControls>> =
  Template.bind({});
export const Long: StoryFn<FC<DialogProps & AdditionalControls>> =
  Template.bind({});
export const LongDynamic: StoryFn<FC<DialogProps & AdditionalControls>> =
  Template.bind({});
export const LongSectioned: StoryFn<FC<DialogProps & AdditionalControls>> =
  Template.bind({});
export const WithOverflowingContent: StoryFn<
  FC<DialogProps & AdditionalControls>
> = WithOverflowingContentTemplate.bind({});
export const WithoutActions: StoryFn<FC<DialogProps & AdditionalControls>> =
  WithoutActionsTemplate.bind({});

Default.args = {
  isOpen: false,
  title: "Dialog Title Here",
  children: "Dialog content...",
  width: 480,
};

Sectioned.args = {
  ...Default.args,
  children: (
    <>
      <DialogSection>hello</DialogSection>
      <DialogSection>it&apos;s me</DialogSection>
    </>
  ),
};

Long.args = {
  ...Default.args,
  children: [..."Dialog really long extended content..."].map(
    (character, index) => (
      <p key={index} style={{ margin: 0 }}>
        {character}
      </p>
    )
  ),
};

LongDynamic.args = {
  ...Default.args,
  children: (
    <>
      <label>
        <input className="peer" type="checkbox" /> Expand
        <div className="hidden h-[60px] w-full bg-R50 peer-checked:block" />
      </label>
      {[..."Dialog extended content..."].map((character, index) => (
        <p key={index} style={{ margin: 0 }}>
          {character}
        </p>
      ))}
    </>
  ),
};

LongSectioned.args = {
  ...Default.args,
  children: (
    <>
      <DialogSection>hello</DialogSection>
      <DialogSection>it&apos;s me</DialogSection>
      <DialogSection>i was wondering</DialogSection>
      <DialogSection>if after all these years</DialogSection>
      <DialogSection>you&apos;d like to meet</DialogSection>
      <DialogSection>to go over</DialogSection>
      <DialogSection>everything</DialogSection>
      <DialogSection>
        they say that time&apos;s supposed to heal ya
      </DialogSection>
      <DialogSection>but i ain&apos;t done much healing</DialogSection>
    </>
  ),
};

WithoutActions.args = Default.args;
