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

import { Flex, Input, Label, TextField, View } from "@phoenix/components";
import type { ComboBoxProps } from "@phoenix/components/core/combobox/ComboBox";
import {
  ComboBox,
  ComboBoxItem,
} from "@phoenix/components/core/combobox/ComboBox";

const meta: Meta = {
  title: "Core/Forms/Combo Box",
  component: ComboBox,
  argTypes: {
    label: {
      control: {
        type: "text",
        default: "Label",
      },
    },
    isDisabled: {
      type: "boolean",
    },
    description: {
      type: "string",
      control: {
        type: "text",
      },
    },
    errorMessage: {
      type: "string",
      control: {
        type: "text",
      },
    },
    isInvalid: {
      control: {
        type: "boolean",
      },
    },
    isRequired: {
      control: {
        type: "boolean",
      },
    },
    menuTrigger: {
      options: ["manual", "input", "focus"],
      control: {
        type: "radio",
      },
    },
  },
  parameters: {
    layout: "centered",
  },
};

export default meta;

const Template: StoryFn<ComboBoxProps<object>> = (args) => (
  <View width="300px">
    <ComboBox {...args}>
      <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
        Chocolate
      </ComboBoxItem>
      <ComboBoxItem textValue="Mint" key={"mint"}>
        Mint
      </ComboBoxItem>
      <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
        Strawberry
      </ComboBoxItem>
      <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
        Vanilla
      </ComboBoxItem>
    </ComboBox>
  </View>
);

export const Default = {
  render: Template,

  args: {
    label: "Ice cream flavor",
  },
};

export const KeyboardNavigation = {
  render: () => (
    <View width="300px">
      <Flex direction="column" gap="size-100">
        <ComboBox label="Prompt" stopPropagation>
          <ComboBoxItem textValue="Customer support" key="customer-support">
            Customer support
          </ComboBoxItem>
          <ComboBoxItem textValue="Product summary" key="product-summary">
            Product summary
          </ComboBoxItem>
        </ComboBox>
        <TextField>
          <Label>Description</Label>
          <Input />
        </TextField>
      </Flex>
    </View>
  ),
};

export function Gallery() {
  return (
    <Flex direction="column" gap="size-200">
      <ComboBox label="Ice cream flavor">
        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
          Chocolate
        </ComboBoxItem>
        <ComboBoxItem textValue="Mint" key={"mint"}>
          Mint
        </ComboBoxItem>
        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
          Strawberry
        </ComboBoxItem>
        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
          Vanilla
        </ComboBoxItem>
      </ComboBox>
      <ComboBox label="Ice cream flavor (Invalid)" isInvalid>
        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
          Chocolate
        </ComboBoxItem>
        <ComboBoxItem textValue="Mint" key={"mint"}>
          Mint
        </ComboBoxItem>
        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
          Strawberry
        </ComboBoxItem>
        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
          Vanilla
        </ComboBoxItem>
      </ComboBox>
      <ComboBox label="Ice cream flavor (Disabled)" isDisabled>
        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
          Chocolate
        </ComboBoxItem>
        <ComboBoxItem textValue="Mint" key={"mint"}>
          Mint
        </ComboBoxItem>
        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
          Strawberry
        </ComboBoxItem>
        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
          Vanilla
        </ComboBoxItem>
      </ComboBox>
      <ComboBox label="Ice cream flavor (L)" size="L">
        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
          Chocolate
        </ComboBoxItem>
        <ComboBoxItem textValue="Mint" key={"mint"}>
          Mint
        </ComboBoxItem>
        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
          Strawberry
        </ComboBoxItem>
        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
          Vanilla
        </ComboBoxItem>
      </ComboBox>
    </Flex>
  );
}
