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

import {
  Button,
  ComboBox,
  ComboBoxItem,
  CredentialField,
  CredentialInput,
  DateField,
  DateInput,
  DateSegment,
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
  Flex,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  SegmentedControl,
  SegmentedControlItem,
  Select,
  SelectChevronUpDownIcon,
  SelectValue,
  Slider,
  SliderNumberField,
  Switch,
  Tag,
  TagGroup,
  TagList,
  Text,
  TextField,
  TimeField,
  ToggleButton,
  ToggleButtonGroup,
  View,
} from "@phoenix/components";

const meta: Meta = {
  title: "Reference/Gallery",

  parameters: {
    layout: "fullscreen",
  },
};

export default meta;

const options = [
  { id: "chocolate", name: "Chocolate" },
  { id: "mint", name: "Mint" },
  { id: "strawberry", name: "Strawberry" },
  { id: "vanilla", name: "Vanilla" },
];

const SelectContent = () => (
  <>
    <Label>Toppings</Label>
    <Button>
      <SelectValue />
      <SelectChevronUpDownIcon />
    </Button>
    <Popover>
      <ListBox>
        {options.map((option) => (
          <ListBoxItem key={option.id} id={option.id}>
            {option.name}
          </ListBoxItem>
        ))}
      </ListBox>
    </Popover>
  </>
);

const Template: StoryFn = () => {
  const [direction, setDirection] = useState<"row" | "column">("row");
  return (
    <View padding="size-200">
      <View
        padding="size-200"
        borderWidth="thin"
        borderColor="default"
        borderRadius="medium"
      >
        <Flex direction="row" gap="size-100" alignItems="center">
          <Button
            size="S"
            onPress={() => setDirection(direction === "row" ? "column" : "row")}
          >
            {`Toggle Direction: ${direction}`}
          </Button>
          <ToggleButtonGroup size="S" selectionMode="multiple">
            <ToggleButton>Option 1</ToggleButton>
            <ToggleButton>Option 2</ToggleButton>
            <ToggleButton>Option 3</ToggleButton>
          </ToggleButtonGroup>
          <SegmentedControl size="S" aria-label="Time granularity">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
          </SegmentedControl>
        </Flex>
      </View>
      <View
        borderWidth="thin"
        borderColor="default"
        padding="size-200"
        borderRadius="medium"
        marginTop="size-200"
      >
        <Flex
          direction={direction}
          gap="size-200"
          alignItems={direction === "row" ? "center" : "start"}
        >
          <ComboBox
            label="Ice cream flavor"
            description={"pick a flavor"}
            placeholder="Select a 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>
          <DateField>
            <Label>Birth date</Label>
            <DateInput>
              {(segment) => <DateSegment segment={segment} />}
            </DateInput>
            <Text slot="description">your birthday</Text>
          </DateField>
          <TimeField>
            <Label>Event Time</Label>
            <DateInput>
              {(segment) => <DateSegment segment={segment} />}
            </DateInput>
            <Text slot="description">the time of your event</Text>
          </TimeField>
          <Select size="S">
            <SelectContent />
            <Text slot="description">the time of your event</Text>
          </Select>
          <View minWidth="300px">
            <TagGroup selectionMode="multiple">
              <Label>Categories</Label>
              <TagList>
                <Tag>News</Tag>
                <Tag>Travel</Tag>
                <Tag>Gaming</Tag>
                <Tag>Shopping</Tag>
              </TagList>
              <Text slot="description">Choose your own category</Text>
            </TagGroup>
          </View>
          <TextField size="M">
            <Label>Label</Label>
            <Input type="text" />
            <Text slot="description">some text</Text>
          </TextField>
          <CredentialField
            isReadOnly
            size="M"
            value="sk-prod-5f8a2c1b0e4d9a7c6b3f"
          >
            <Label>Production API Key</Label>
            <CredentialInput />
            <Text slot="description">Managed by workspace settings</Text>
          </CredentialField>
          <Button size="S">Button</Button>
        </Flex>
        <Flex direction="row" gap="size-200" alignItems="center">
          <ComboBox
            label="Ice cream flavor"
            description={"pick a flavor"}
            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>
          <Select size="L">
            <SelectContent />
          </Select>
          <SegmentedControl aria-label="View">
            <SegmentedControlItem id="list">List</SegmentedControlItem>
            <SegmentedControlItem id="grid">Grid</SegmentedControlItem>
            <SegmentedControlItem id="chart">Chart</SegmentedControlItem>
          </SegmentedControl>
          <SegmentedControl size="L" aria-label="Time granularity">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
          </SegmentedControl>
          <Button size="M">Button</Button>
        </Flex>
      </View>
      <View
        padding="size-200"
        borderWidth="thin"
        borderColor="default"
        borderRadius="medium"
        marginTop="size-200"
      >
        <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>
          <Select size="S">
            <SelectContent />
          </Select>
          <ComboBox label="Ice cream flavor" 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>
          <Select size="M">
            <SelectContent />
          </Select>
        </Flex>
      </View>
      <View
        padding="size-200"
        borderWidth="thin"
        borderColor="default"
        borderRadius="medium"
        marginTop="size-200"
      >
        <Flex direction="row" gap="size-400" alignItems="start">
          <Flex direction="column" gap="size-200" width="200px">
            <Switch>Enable notifications</Switch>
            <Switch defaultSelected>Dark mode</Switch>
            <Switch>Airplane mode</Switch>
            <Switch isDisabled>Disabled switch</Switch>
          </Flex>
          <Flex direction="column" gap="size-200" flex="1 1 auto">
            <Slider
              label="Volume"
              defaultValue={75}
              minValue={0}
              maxValue={100}
            />
            <Slider
              label="Brightness"
              defaultValue={50}
              minValue={0}
              maxValue={100}
            >
              <SliderNumberField />
            </Slider>
            <Slider
              label="Opacity"
              defaultValue={0.8}
              minValue={0}
              maxValue={1}
              step={0.1}
            >
              <SliderNumberField />
            </Slider>
          </Flex>
        </Flex>
      </View>
      <View
        borderWidth="thin"
        borderColor="default"
        borderRadius="medium"
        marginTop="size-200"
      >
        <DisclosureGroup>
          <Disclosure id="content">
            <DisclosureTrigger>Nutrition Facts</DisclosureTrigger>
            <DisclosurePanel>
              <Text>Ice cream is good for you!</Text>
            </DisclosurePanel>
          </Disclosure>
        </DisclosureGroup>
      </View>
    </View>
  );
};

export const Default = {
  render: Template,
};
