import { search } from "@simplybusiness/icons";
import type { Meta } from "@storybook/react";
import type { ComboboxRef } from ".";
import { Combobox, type ComboboxProps } from ".";
import { delay, excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import { Icon } from "../Icon";
import { Text } from "../Text";
import {
  FRUITS,
  FRUITS_OBJECTS,
  FRUITS_STRING_GROUPS,
  US_STATES,
} from "./fixtures";

const meta: Meta<typeof Combobox> = {
  title: "Forms/Combobox",
  component: Combobox,
  argTypes: {
    type: {
      options: [],
    },
    ...excludeControls("icon"), // options
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    options: FRUITS,
  },
};

export const OptionsObject = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    options: FRUITS_OBJECTS,
  },
};

export const GroupedOptions = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Grouped Fruits",
    options: FRUITS_STRING_GROUPS,
  },
};

export const WithIcon = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    icon: <Icon icon={search} />,
    options: FRUITS_OBJECTS,
  },
};

export const InvalidState = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    icon: <Icon icon={search} />,
    options: FRUITS_OBJECTS,
    isInvalid: true,
  },
};

export const StateSelector = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "US State Selector",
    placeholder: "Choose your state",
    icon: <Icon icon={search} />,
    options: US_STATES,
  },
};

export const Async = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    asyncOptions: async (input: string) => {
      await delay(1_000);
      return FRUITS.filter(fruit =>
        fruit.toLowerCase().includes(input.toLowerCase()),
      );
    },
  },
};

export const CustomOptionComponent = {
  render: (args: ComboboxProps<string> & { ref?: ComboboxRef }) => (
    <Combobox {...args} />
  ),
  args: {
    label: "Fruits",
    options: FRUITS_OBJECTS,
    optionComponent: ({
      option,
    }: {
      option: { id?: string; label: string; value: string };
      isHighlighted: boolean;
    }) => (
      <div>
        <Text variant="h3" elementType="p">
          {option.label}
        </Text>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sint
          nesciunt molestias blanditiis natus sed consequatur necessitatibus.
        </Text>
      </div>
    ),
  },
};

export default meta;
