import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { useState } from "react";
import { SearchFilter, SEARCH_FILTER_DIRECTION } from "./SearchFilter";
import { Flex } from "../Flex";
import { Button, BUTTON_VARIANT } from "../Button";
import { ICON_TYPE } from "../Icon";
import { Token } from "../Token";
import { Stack } from "../Stack";
import { EnumTable } from "../../storybook-components/EnumTable";

<Meta title="Deprecated/Search Filter" component={SearchFilter} />

# SearchFilter

The `SearchFilter` component is a controlled component where a user can enter a text string to be used in a search or filter operation elsewhere on the page. The component uses a `form` to wrap an `input`.

```jsx
import { SearchFilter } from "@aptible/arrow-ds";
```

<Preview withSource={SourceState.OPEN}>
  <Story name="SearchFilter">
    {() => {
      const [searchQuery, setSearchQuery] = useState("");
      const onInputChange = (event) => {
        setSearchQuery(event.target.value);
      };
      const handleSubmit = (event) => {
        event.preventDefault();
        console.log(searchQuery);
      };
      const handleClose = () => {
        console.log("closed");
        setSearchQuery("");
      };
      return (
        <SearchFilter
          inputValue={searchQuery}
          onInputChange={onInputChange}
          onSearchSubmit={handleSubmit}
          onClose={handleClose}
        />
      );
    }}
  </Story>
</Preview>

## Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={SearchFilter} />
<EnumTable enums={{ SEARCH_FILTER_DIRECTION }} />

## Demos

### Expand Direction

The `direction` prop sets the slide out direction of the input. It is specifified with respect to the position of the toggle button. If the `SearchFilter` is positioned on the left side of a page, use direction="left" to avoid shifting adjacent content. If the `SearchFilter` is positioned on the right side of a page, use direction="right".

<Preview isColumn>
  <Story name="ExpandDirectionLeft">
    <Flex className="w-full justify-end">
      <Stack>
        <SearchFilter />
        <Button icon={ICON_TYPE.POO_STORM} variant={BUTTON_VARIANT.UTILITY} />
      </Stack>
    </Flex>
  </Story>
  <Story name="ExpandDirectionRight">
    <Flex className="w-full">
      <Stack>
        <Button icon={ICON_TYPE.POO_STORM} variant={BUTTON_VARIANT.UTILITY} />
        <SearchFilter direction={SEARCH_FILTER_DIRECTION.RIGHT} />
      </Stack>
    </Flex>
  </Story>
</Preview>

### Disable AutoClose

By default, the search input is opened via a toogle button and automatically closed when the user clicks outside the component or presses `ESC`. This can be disabled by setting the `autoClose` prop to `false`. Then the component will render in an "always open" state.

<Preview isColumn>
  <Story name="DisableAutoClose">
    <Flex className="w-full justify-end">
      <SearchFilter autoClose={false} />
    </Flex>
  </Story>
</Preview>

### Working Example | Search as you type

<Preview isColumn>
  <Story name="SearchAsYouType">
    {() => {
      const [searchQuery, setSearchQuery] = useState("");
      const initialItems = ["Chocolate", "Strawberry", "Banana", "Vanilla"];
      const [items, setItems] = useState(initialItems);
      const onInputChange = (event) => {
        setSearchQuery(event.target.value);
        const filteredItems = [...initialItems].filter((item) => {
          return item.toLowerCase().includes(event.target.value.toLowerCase());
        });
        setItems(filteredItems);
      };
      const handleClear = () => {
        setSearchQuery("");
        setItems([...initialItems]);
      };
      return (
        <Flex className="w-full flex-col h-64">
          <Flex className="w-full justify-end">
            <SearchFilter
              className="mb-2"
              inputValue={searchQuery}
              onInputChange={onInputChange}
              onClear={handleClear}
              autoClose={false}
            />
          </Flex>
          <ul>
            {items.map((item) => (
              <li key={item}>{item} </li>
            ))}
          </ul>
        </Flex>
      );
    }}
  </Story>
</Preview>

### Working Example | Search on submit

<Preview isColumn>
  <Story name="SearchOnSubmit">
    {() => {
      const [searchQuery, setSearchQuery] = useState("");
      const initialItems = ["Chocolate", "Strawberry", "Banana", "Vanilla"];
      const [items, setItems] = useState(initialItems);
      const [searchTokens, setSearchTokens] = useState([]);
      const onInputChange = (event) => {
        setSearchQuery(event.target.value);
      };
      const handleSubmit = (event) => {
        event.preventDefault();
        const filteredItems = [...initialItems].filter((item) => {
          return item.toLowerCase().includes(searchQuery.toLowerCase());
        });
        setItems(filteredItems);
        setSearchTokens([searchQuery]);
      };
      const handleClose = () => {
        setSearchQuery("");
      };
      return (
        <Flex className="w-full flex-col">
          <Flex className="w-full justify-end">
            <Stack>
              {searchTokens.map(
                (token) => token && <Token key={token} label={token} />,
              )}
              <SearchFilter
                inputValue={searchQuery}
                onInputChange={onInputChange}
                onSearchSubmit={handleSubmit}
                onClose={handleClose}
              />
            </Stack>
          </Flex>
          <ul>
            {items.map((item) => (
              <li key={item}>{item} </li>
            ))}
          </ul>
        </Flex>
      );
    }}
  </Story>
</Preview>