"use client"

import { Span, TagsInput } from "@chakra-ui/react"


const Demo = () => {
  return (
    <TagsInput.Root defaultValue={["React", "Chakra", "TypeScript"]}>
      <TagsInput.Label>Tags</TagsInput.Label>
      <TagsInput.Control>
        <TagsInput.Items />
        <TagsInput.Input placeholder="Add tag..." />
      </TagsInput.Control>
      <Span textStyle="xs" color="fg.muted" ms="auto">
        Press Enter or Return to add tag
      </Span>
    </TagsInput.Root>
  )
}

"use client"

import {
  Combobox,
  TagsInput,
  useCombobox,
  useFilter,
  useListCollection,
  useTagsInput,
} from "@chakra-ui/react"
import { useId, useRef } from "react"


const Demo = () => {
  const { contains } = useFilter({ sensitivity: "base" })

  const { collection, filter } = useListCollection({
    initialItems: [
      "React",
      "Chakra",
      "TypeScript",
      "Next.js",
      "Ark UI",
      "Zag.js",
    ],
    filter: contains,
  })

  const inputId = useId()
  const controlRef = useRef<HTMLDivElement | null>(null)

  const tags = useTagsInput({
    ids: { input: inputId },
  })

  const comobobox = useCombobox({
    ids: { input: inputId },
    collection,
    onInputValueChange(e) {
      filter(e.inputValue)
    },
    positioning: {
      getAnchorRect() {
        return controlRef.current!.getBoundingClientRect()
      },
    },
    value: [],
    allowCustomValue: true,
    onValueChange: (e) => tags.addValue(e.value[0]),
    selectionBehavior: "clear",
  })

  return (
    <Combobox.RootProvider value={comobobox}>
      <TagsInput.RootProvider value={tags}>
        <TagsInput.Label>Tags</TagsInput.Label>

        <TagsInput.Control ref={controlRef}>
          {tags.value.map((tag, index) => (
            <TagsInput.Item key={index} index={index} value={tag}>
              <TagsInput.ItemPreview>
                <TagsInput.ItemText>{tag}</TagsInput.ItemText>
                <TagsInput.ItemDeleteTrigger />
              </TagsInput.ItemPreview>
            </TagsInput.Item>
          ))}

          <Combobox.Input unstyled asChild>
            <TagsInput.Input placeholder="Add tag..." />
          </Combobox.Input>
        </TagsInput.Control>

        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.Empty>No tags found</Combobox.Empty>
            {collection.items.map((item) => (
              <Combobox.Item item={item} key={item}>
                <Combobox.ItemText>{item}</Combobox.ItemText>
                <Combobox.ItemIndicator />
              </Combobox.Item>
            ))}
          </Combobox.Content>
        </Combobox.Positioner>
      </TagsInput.RootProvider>
    </Combobox.RootProvider>
  )
}

"use client"

import { Button, Collapsible, Stack } from "@chakra-ui/react"
import { LuChevronDown } from "react-icons/lu"
import { LoremIpsum } from "react-lorem-ipsum"


const Demo = () => (
  <Collapsible.Root collapsedHeight="100px">
    <Collapsible.Content
      _closed={{
        shadow: "inset 0 -12px 12px -12px var(--shadow-color)",
        shadowColor: "blackAlpha.500",
      }}
    >
      <Stack padding="4" borderWidth="1px" rounded="l2">
        <LoremIpsum p={1} />
        <LoremIpsum p={1} />
      </Stack>
    </Collapsible.Content>
    <Collapsible.Trigger asChild mt="4">
      <Button variant="outline" size="sm">
        <Collapsible.Context>
          {(api) => (api.open ? "Show Less" : "Show More")}
        </Collapsible.Context>
        <Collapsible.Indicator
          transition="transform 0.2s"
          _open={{ transform: "rotate(180deg)" }}
        >
          <LuChevronDown />
        </Collapsible.Indicator>
      </Button>
    </Collapsible.Trigger>
  </Collapsible.Root>
)