import { Box } from '../atoms/box.js'
import { Button } from '../atoms/button.js'
import { Form } from '../atoms/form.js'
import { Input } from '../atoms/input.js'
import h from '../shared/h.js'
import { NAVIGATION_SEARCH } from '../shared/icons.js'
import t from '../shared/t.js'

export function SearchForm ({ _model, ...props }) {
  const { links } = _model
  const search = links?.[1] || { name: '', value: null }
  const count = search.value
  const title = t('Enter your search term')

  return h(Box, { ...props, className: 'rounded-2xl text-txa bg-bga' },
    h(Form, { name: t('Search'), action: '?', role: 'search' },
      h('div', { className: 'flex space-x-5' },
        h('div', { className: 'grow' },
          h(Input, {
            type: 'search',
            name: 'q',
            value: new URLSearchParams(globalThis.location.search)?.get?.('q'),
            placeholder: links?.[0]?.name,
            title,
            'data-label': title
          })
        ),
        h('div', { className: 'grow-0' },
          h(Button, {
            _textless: true,
            _model: {
              name: t('Submit'),
              icon: NAVIGATION_SEARCH
            },
            type: 'submit'
          })
        )
      )
    ),
    count && h('p', t('{0} results found', count))
  )
}
