import { useRef, useState } from "react";
import { commonProps } from "../../../utils/storybook";
import { Icons } from "../../icons";
import { Box } from "../../box";
import { Flex } from "../../flex";
import { Text } from "../../text";
import { Button } from "../../button";
import { Input } from "..";
import { Dialog } from "../../dialog";
import type { StoryObj, Meta } from "@storybook/react";

const meta: Meta<typeof Input> = {
  title: "Input & Text Area",
  component: Input,

  args: {
    label: "Input Label",
    placeholder: "Placeholder",
    info: "Informative message holder",
    multiLine: false,
    error: false,
  },
  argTypes: {
    placeholder: {
      description: "Placeholder text",
      type: "string",
      table: { type: { summary: "string" } },
    },
    multiLine: {
      type: "boolean",
      defaultValue: { summary: "false" },
    },
    height: {
      type: "number",
      description:
        "If there is a value, will render the textarea in fix height. Only applicable when multiLine set to `true`",
    },
    error: {
      description: "Sets error state on input",
      type: "boolean",
      defaultValue: { summary: "false" },
      table: { type: { summary: "boolean" } },
    },
    disabled: {
      description: "Sets the `disabled` attribute",
      type: "boolean",
      defaultValue: { summary: "false" },
      table: { type: { summary: "boolean" } },
    },
    infoEllipsis: {
      type: "boolean",
      defaultValue: { summary: "false" },
      table: { type: { summary: "boolean" } },
    },
    raisedLabel: {
      type: "boolean",
      defaultValue: { summary: "false" },
      table: { type: { summary: "boolean" } },
    },
    rightElement: {
      control: {
        type: "disable",
      },
    },

    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof Input>;

export const Uncontrolled: Story = {
  render: (args) => {
    const ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);

    return (
      <Flex css={{ width: "388px", gap: "$2", flexDirection: "column" }}>
        <Input {...args} ref={ref} />
        <Flex css={{ gap: "$2" }}>
          <Button
            text="Native set value"
            onClick={() => {
              if (!ref.current) {
                return;
              }
              ref.current.value = "react-hook-form";
            }}
            css={{ flex: 1, flexShrink: 0 }}
          />
          <Button
            variant="secondary"
            text="Native clear"
            onClick={() => {
              if (!ref.current) {
                return;
              }
              ref.current.value = "";
            }}
            css={{ flex: 1, flexShrink: 0 }}
          />
        </Flex>
      </Flex>
    );
  },
};

export const Controlled: Story = {
  render: (args) => {
    const [value, setValue] = useState("");

    return (
      <Flex css={{ width: "288px", gap: "$2", flexDirection: "column" }}>
        {/* @ts-expect-error ts incorrectly infers type of args, storybook only issue */}
        <Input
          {...args}
          label="Controlled Input"
          value={value}
          onChange={(event) => setValue(event.target.value)}
        />
        <Flex css={{ gap: "$2" }}>
          <Button
            text="Set Value"
            onClick={() =>
              setValue(
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
              )
            }
            css={{ flex: 1, flexShrink: 0 }}
          />
          <Button
            variant="secondary"
            text="Clear"
            onClick={() => setValue("")}
            css={{ flex: 1, flexShrink: 0 }}
          />
        </Flex>
      </Flex>
    );
  },
};

export const WithRightElement: Story = {
  render: (args) => (
    <Box css={{ width: "288px" }}>
      <Input {...args} rightElement={<Icons.Close color="$gray-1" />} />
    </Box>
  ),
};

export const WithCustomCSS: Story = {
  render: (args) => (
    <Flex
      css={{
        width: "600px",
        border: "1px solid $light-red",
        p: "$2",
        borderRadius: "$xs",
        gap: "$1",
      }}
    >
      <Input {...args} css={{ flex: 1, "&& fieldset": { border: "1px solid $light-soft-pink" } }} />
      <Flex
        css={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          color: "$light-off-white",
          bg: "$off-white-9",
        }}
      >
        <Text>Flex 1</Text>
      </Flex>
      <Flex
        css={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          color: "$light-off-white",
          bg: "$off-white-9",
        }}
      >
        <Text>Flex 1</Text>
      </Flex>
    </Flex>
  ),
};

export const BugsPlayground: Story = {
  render: (args) => (
    <Box css={{ width: 300 }}>
      <Text css={{ mb: "$3", display: "block" }}>Here is some text</Text>
      <Dialog
        triggerProps={{ asChild: true }}
        trigger={<Input {...args} rightElement={<Icons.Spinner color="$off-white-72" />} />}
      >
        no content
      </Dialog>
      <Input {...args} css={{ mt: "$3" }} rightElement={<Icons.Spinner color="$off-white-72" />} />
      <Text>Some content below</Text>
    </Box>
  ),
  args: {
    defaultValue: "nonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenone",
  },
};