import React from 'react'
import { type Meta } from '@storybook/react-vite'

import SearchBar from '../../components/SearchBar/SearchBar'
import { useFocus } from '../useFocus/useFocus'
import { DocsTemplate } from '../../../.storybook'

export const Example = (): React.JSX.Element => {
  const ref = useFocus(true)

  return (
    <SearchBar
      value={''}
      onChange={() => {
        return
      }}
      ref={ref}
    />
  )
}
Example.storyName = 'useFocus'
Example.args = {}

export default {
  title: 'Hooks/useFocus',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`
              import { useFocus } from '@patterninc/react-ui'

              const ref = useFocus(true)

              Output: Returns a ref to be used on the element that needs focus.
            `}
            description={
              <span>
                A hook used to get a ref for an element. This ref will be used
                to dynamically pass the focus to the intended element.
              </span>
            }
            infoBullets={[
              <span key='first-line'>
                A good use case for this is when we have a form element that is
                hidden inside of a <code>SideDrawer</code> or a popover. In
                these cases, our generic <code>autoFocus</code> prop will not
                work. This hook will let us know when the element is visible and
                ready to be focused.
              </span>,
            ]}
            noArgs
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>