import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Search as SearchIcon } from '@transferwise/icons';
import { useState } from 'react';

import Button from '../button';
import Modal from '../modal';
import Typeahead from './Typeahead';

// needed for SB to display correct name in the docs
(Typeahead as React.FC).displayName = 'Typeahead';
type Story = StoryObj<typeof Typeahead>;

const meta: Meta<typeof Typeahead> = {
  component: Typeahead,
  title: 'Forms/Typeahead/Tests',
  tags: ['!autodocs', '!manifest'],
};
export default meta;

export const AutoFocusInModal: Story = {
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 500,
      },
    },
    chromatic: {
      delay: 1000,
    },
  },
  render: function Render(args, { viewMode }) {
    const [open, setOpen] = useState<boolean>(viewMode !== 'docs');
    return (
      <>
        <Button v2 onClick={() => setOpen(true)}>
          Open Modal
        </Button>
        <Modal
          title="Global Search"
          body={
            <Typeahead
              id="typeahead"
              name="search-input"
              // eslint-disable-next-line jsx-a11y/no-autofocus
              autoFocus
              size="md"
              showSuggestions
              showNewEntry={false}
              addon={<SearchIcon size={24} />}
              options={[
                { label: 'Option 1' },
                { label: 'Option 2' },
                { label: 'Option 3' },
                { label: 'Option 4' },
              ]}
              inputAutoComplete="off"
              onSearch={(search) => {
                console.log(search);
              }}
              onChange={(option) => {}}
              onBlur={() => {}}
            />
          }
          open={open}
          onClose={() => {
            setOpen(false);
          }}
        />
      </>
    );
  },
};