import { Button, Container } from 'react-bootstrap'
import styles from './search.module.css'
import SearchIcon from '../svgs/search-line.svg'
import CloseIcon from '../svgs/close-line.svg'
import { useEffect, useState } from 'react'
import { Form, Input, Select, SubmitButton } from './form'
import { useRouter } from 'next/router'

export default function Search ({ sub }) {
  const router = useRouter()
  const [searching, setSearching] = useState(router.query.q)
  const [q, setQ] = useState(router.query.q || '')
  const [atBottom, setAtBottom] = useState()

  useEffect(() => {
    setAtBottom(Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight)
    window.onscroll = function (ev) {
      if (Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        setAtBottom(true)
      } else {
        setAtBottom(false)
      }
    }
  }, [])

  const search = async values => {
    let prefix = ''
    if (sub) {
      prefix = `/~${sub}`
    }

    if (values.q?.trim() !== '') {
      if (values.what === 'users') {
        await router.push({
          pathname: '/users/search',
          query: { q, what: 'users' }
        })
        return
      }

      if (values.what === '') delete values.what
      if (values.sort === '') delete values.sort
      if (values.when === '') delete values.when
      await router.push({
        pathname: prefix + '/search',
        query: values
      })
    }
  }

  const showSearch = atBottom || searching || router.query.q
  const filter = router.query.q && !sub
  return (
    <>
      <div className={`${styles.searchSection} ${showSearch ? styles.solid : styles.hidden}`}>
        <Container className={`px-sm-0 ${styles.searchContainer} ${filter ? styles.leaveRoom : ''}`}>
          {showSearch
            ? (
              <Form
                className={styles.formActive}
                initial={{
                  q: router.query.q || '',
                  what: router.query.what || '',
                  sort: router.query.sort || '',
                  when: router.query.when || ''
                }}
                onSubmit={search}
              >
                {filter &&
                  <div className='text-muted font-weight-bold my-3 d-flex align-items-center'>
                    <Select
                      groupClassName='mr-2 mb-0'
                      onChange={(formik, e) => search({ ...formik?.values, what: e.target.value })}
                      name='what'
                      size='sm'
                      items={['all', 'posts', 'comments', 'users']}
                    />
                    {router.query.what !== 'users' &&
                      <>
                        by
                        <Select
                          groupClassName='mx-2 mb-0'
                          onChange={(formik, e) => search({ ...formik?.values, sort: e.target.value })}
                          name='sort'
                          size='sm'
                          items={['match', 'recent', 'comments', 'sats', 'votes']}
                        />
                        for
                        <Select
                          groupClassName='mb-0 ml-2'
                          onChange={(formik, e) => search({ ...formik?.values, when: e.target.value })}
                          name='when'
                          size='sm'
                          items={['forever', 'day', 'week', 'month', 'year']}
                        />

                      </>}
                  </div>}
                <div className={`${styles.active}`}>
                  <Input
                    name='q'
                    required
                    autoFocus={showSearch && !atBottom}
                    groupClassName='mr-3 mb-0 flex-grow-1'
                    className='flex-grow-1'
                    clear
                    onChange={async (formik, e) => {
                      setSearching(true)
                      setQ(e.target.value?.trim())
                    }}
                  />
                  {q || atBottom || router.query.q
                    ? (
                      <SubmitButton variant='primary' className={styles.search}>
                        <SearchIcon width={22} height={22} />
                      </SubmitButton>
                      )
                    : (
                      <Button
                        className={styles.search} onClick={() => {
                          setSearching(false)
                        }}
                      >
                        <CloseIcon width={26} height={26} />
                      </Button>)}
                </div>

              </Form>
              )
            : (
              <Button className={`${styles.search} ${styles.formActive}`} onClick={() => setSearching(true)}>
                <SearchIcon width={22} height={22} />
              </Button>
              )}
        </Container>
      </div>
      <div className={`${styles.searchPadding} ${filter ? styles.leaveRoom : ''}`} />
    </>
  )
}