/* eslint-disable max-lines */

import { useState } from "react";
import { fn } from "@storybook/test";
import { Dialog, Flex, Select, Tabs } from "..";
import { Text } from "../text";
import { Button } from "../button";
import { commonProps } from "../../utils/storybook";
import { Box } from "../box";
import { Icons } from "../icons";
import { InputDeviceProvider } from "../../utils";
import type { StoryObj, Meta } from "@storybook/react";

const mockSelectItems = [
  {
    value: "apple",
    label: "Apple",
  },
  {
    value: "banana",
    label: "Banana",
  },
  {
    value: "blueberry",
    label: "Blueberry",
  },
  {
    value: "really long label",
    label:
      "reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy long label",
  },
  {
    value: "cherry",
    label: "Cherry",
  },
  {
    value: "date",
    label: "Date",
  },
  {
    value: "elderberry",
    label: "Elderberry",
  },
  {
    value: "fig",
    label: "Fig",
  },
  {
    value: "grape",
    label: "Grape",
  },
  {
    value: "honeydew",
    label: "Honeydew",
  },
  {
    value: "kiwi",
    label: "Kiwi",
  },
  {
    value: "lemon",
    label: "Lemon",
  },
  {
    value: "mango",
    label: "Mango",
  },
  {
    value: "nectarine",
    label: "Nectarine",
  },
  {
    value: "orange",
    label: "Orange",
  },
  {
    value: "pear",
    label: "Pear",
  },
  {
    value: "quince",
    label: "Quince",
  },
  {
    value: "raspberry",
    label: "Raspberry",
  },
  {
    value: "strawberry",
    label: "Strawberry",
  },
  {
    value: "tangerine",
    label: "Tangerine",
  },
  {
    value: "watermelon",
    label: "Watermelon",
  },
];

const meta: Meta<typeof Select> = {
  title: "Select",
  component: Select,
  tags: ["autodocs"],
  argTypes: {
    error: {
      control: { type: "boolean" },
    },
    rightElement: {
      control: false,
    },
    ...commonProps,
  },
  args: {
    label: "label",
    placeholder: "placeholder",
    options: mockSelectItems,
    error: false,
    info: "extra message",
    rightElement: <Icons.Close size="s" color="$light-off-white" />,
    onLastElementReached: fn(),
  },
};
export default meta;
type Story = StoryObj<typeof Select>;

export const Uncontrolled: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box
        css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "16px" }}
      >
        <Select css={{ m: "$2" }} {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

/**
 * Apple is selected by default
 */
export const UncontrolledWithDefaultValue: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box
        css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "16px" }}
      >
        <Select css={{ m: "$2" }} defaultValue="apple" {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

export const Controlled: Story = {
  render: (args) => {
    const [value, setValue] = useState("");
    return (
      <InputDeviceProvider>
        <Box
          css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "16px" }}
        >
          <Select
            css={{ m: "$2" }}
            value={value}
            onValueChange={(val) => setValue(val)}
            {...args}
          />
          <Flex gap="4">
            <Button
              text="Set Value"
              onClick={() => setValue("banana")}
              css={{ width: "160px", my: "$6" }}
            />
            <Button
              variant="secondary"
              text="Clear"
              onClick={() => setValue("")}
              css={{ width: "160px", my: "$6" }}
            />
          </Flex>

          <Text variant="body3" css={{ color: "$off-white-72" }}>
            value : {value}
          </Text>
        </Box>
      </InputDeviceProvider>
    );
  },
};

export const WithPerOptionProps: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box
        css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "16px" }}
      >
        <Select css={{ m: "$2" }} {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

WithPerOptionProps.args = {
  options: [
    {
      value: "apple",
      label: "Apple",
      css: { bg: "green" },
    },
    {
      value: "banana",
      label: "Banana",
      css: { bg: "yellow" },
    },
    {
      value: "blueberry",
      label: "Blueberry",
      css: { bg: "blue" },
    },
  ],
};

export const Scrollable: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box
        css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "16px" }}
      >
        <Select css={{ m: "$2" }} {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

Scrollable.args = {
  options: [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
    { label: "Option 4", value: "4" },
    { label: "Option 5", value: "5" },
    { label: "Option 6", value: "6" },
    { label: "Option 7", value: "7" },
    { label: "Option 8", value: "8" },
    { label: "Option 9", value: "9" },
    { label: "Option 10", value: "10" },
    { label: "Option 11", value: "11" },
    { label: "Option 12", value: "12" },
    { label: "Option 13", value: "13" },
    { label: "Option 14", value: "14" },
    { label: "Option 15", value: "15" },
    { label: "Option 16", value: "16" },
    { label: "Option 17", value: "17" },
    { label: "Option 18", value: "18" },
    { label: "Option 19", value: "19" },
    { label: "Option 20", value: "20" },
    { label: "Option 21", value: "21" },
    { label: "Option 22", value: "22" },
    { label: "Option 23", value: "23" },
    { label: "Option 24", value: "24" },
    { label: "Option 25", value: "25" },
  ],
};

export const WithLongOptions: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "$4" }}>
        <Select css={{ m: "$2" }} {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

WithLongOptions.args = {
  options: [
    { label: "Pneumonoultramicroscopicsilicovolcanoconiosis", value: "1" },
    {
      label:
        "0x3a1b8c9e2d4f6a70b5e3d8c7a1b4e9f4d6c7a0b5e3d8c7a1b4e9f4d6c7a0b5e3 - 0x3a1b8c9e2d4f6a70b5e3d8c7a1b4e9f4d6c7a0b5e3d8c7a1b4e9f4d6c7a0b5e3",
      value: "2",
    },
    {
      value: "3",
      label:
        "This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu",
    },
    { label: "0x1e2d3c4b5a6f7e8d9c0b1a2b3c4d5e6f7e8d9c0b1a2b3c4d5e6f7e8d9c0b1a2", value: "4" },
    { label: "Short option 2", value: "5" },
    { label: "0xa1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2", value: "6" },
    { label: "Short Option 3", value: "7" },
  ],
};

export const WithExtra: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "$4" }}>
        <Select css={{ m: "$2" }} {...args} />
      </Box>
    </InputDeviceProvider>
  ),
};

WithExtra.args = {
  options: [
    { label: "With Icon", value: "1", extra: <Icons.Chr size="l" /> },
    {
      value: "really long label With Icon",
      extra: <Icons.Chr size="l" />,
      label:
        "reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy reallyyyyyyy long label",
    },
    { label: "Without Icon", value: "2" },
  ],
};

/**
 * Selecting an option drawn over the button should not click the button when using a touch device.
 */
export const BugsPlayground: Story = {
  render: (args) => (
    <InputDeviceProvider>
      <Box css={{ width: "100%", height: "100%", backgroundColor: "$dark-chromia-dark", p: "$4" }}>
        <Select css={{ m: "$2" }} {...args} />
        <Flex>
          <div>
            <Button onClick={window.alert}>click me</Button>
            <Button onClick={window.alert}>click me</Button>
            <Button onClick={window.alert}>click me</Button>
            <Button onClick={window.alert}>click me</Button>
            <Button onClick={window.alert}>click me</Button>
            <Button onClick={window.alert}>click me</Button>
          </div>
          <div>
            <Tabs
              ariaLabel="Tabs"
              defaultTab="one"
              tabs={[
                { tabName: "one", index: "1", content: "one" },
                { tabName: "two", index: "2", content: "two" },
              ]}
            />
          </div>
        </Flex>
      </Box>
      <Dialog trigger={<Button>Open modal</Button>}>
        <Select css={{ m: "$2" }} {...args} />
      </Dialog>
    </InputDeviceProvider>
  ),
};