import { Fragment } from 'react'

import styled from 'styled-components/macro'

import { Loader } from 'features/Loader'
import { useExtendedSearchStore } from 'features/ExtendedSearchPage/store'

export const LoaderWrapper = styled.div`
  position: absolute;
  top: 0;
  background-color: rgba(129, 129, 129, 0.5);
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
`

const Input = styled.input`
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: bold;
  font-size: 18px;
  background-color: #3F3F3F;
  color: #fff;
  border: transparent;
  border-color: transparent;
  outline: none;
`

export const SearchInput = () => {
  const {
    isFetching,
    onQueryChange,
    query,
  } = useExtendedSearchStore()
  return (
    <Fragment>
      <Input
        role='search'
        value={query}
        onChange={onQueryChange}
      />
      {isFetching && (
        <LoaderWrapper>
          <Loader color='#515151' />
        </LoaderWrapper>
      )}
    </Fragment>
  )
}