import React, { useEffect } from 'react'
import styled from 'styled-components'

const SearchWrapper = styled.div`
  position: relative;
  width: 100%;
  form {
    margin-bottom: 0px;
  }
`

const StyledForm = styled.form`
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  color: ${({ theme }) => theme.colors.grey2};
  background-color: ${({ theme }) => theme.concreteGray};
  margin: 0px;
  margin-right: 12px;
  @media (max-width: 960px) {
    margin-right: 0;
  }

  :hover {
    color: ${({ theme }) => theme.colors.grey3};
    background-color: ${({ theme }) => theme.colors.grey2};
  }

  :focus {
    color: ${({ theme }) => theme.colors.grey3};
    background-color: ${({ theme }) => theme.colors.grey2};
  }
`

const StyledInput = styled.input`
  background-color: transparent;
  color: ${({ theme }) => theme.textColor};
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  width: 100%;
  border: none;
  @media (max-width: 960px) {
    padding: 0.5rem 0.75rem;
  }
  :focus {
    outline: none;
  }
`

const ClearButton = styled.button`
  opacity: ${({ isActive }) => (isActive ? 1 : 0.2)};
  background-color: unset;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: ${({ isActive }) => (isActive ? 'initial' : 'none')};
  path {
    stroke: ${({ theme }) => theme.colors.textColor};
  }
  :focus {
    outline: none;
  }
  :hover {
    cursor: ${({ isActive }) => (isActive ? 'pointer' : 'initial')};
  }
`

export default function Search(props) {
  // TEMP(onbjerg): Disable search until we are accepted into Docsearch.
  // When this happens we will have to reconfigure all of Docsearch-related
  // functionality, including the crawl-config.json
  return <></>

  const isV2 = props.path.slice(0, 8) === '/docs/honeyswap'

  // filter based on the version of the docs
  function handleResults(hits) {
    return hits.filter(hit => {
      if (hit.version) {
        return isV2 ? hit.version?.[0] === 'v2' : hit.version?.[0] === 'v1'
      } else {
        return isV2 ? hit.url.includes('v2') : hit.url.includes('v1')
      }
    })
  }

  // based on version, reset docsearch to use right facet filter
  useEffect(() => {
    if (window.docsearch) {
      try {
        window.docsearch({
          apiKey: '8962240e69e6d23a88432f501c115470',
          indexName: 'uniswap_v2_docs',
          appId: 'VZ0CVS8XCW',
          inputSelector: '.docsearch', // the selector of my search input
          transformData: handleResults
        })
      } catch (e) {
        console.log(e)
        console.log('Error loading algolia search')
      }
    }
  }, [])

  return (
    <SearchWrapper>
      <StyledForm>
        <StyledInput className="docsearch" placeholder="Search Docs..." />
        <ClearButton />
      </StyledForm>
    </SearchWrapper>
  )
}