import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { ClearButton } from 'features/Search/styled'
import { usePreferencesStore } from 'features/PreferencesPopup/store'
import { useLexicsStore } from 'features/LexicsStore'

const Wrapper = styled.div`
  position: relative;
  width: 100%;
  height: 36px;
  margin-right: 5px;
  background: #292929;
  border-radius: 10px;
  display: flex;
  align-items: center;

  ::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-left: 7px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url(/images/search.svg);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
`

const Input = styled.input`
  border: none;
  background: transparent;
  outline: none;
  position: relative;

  width: 100%;
  height: 100%;
  display: block;
  margin-bottom: 2px;
  padding-left: 34px;
  color: ${({ theme }) => theme.colors.text100};
  caret-color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  font-size: 0.66rem;
  line-height: 1.04rem;
  letter-spacing: -0.4px;

  ::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        font-size: 10px;
      }

      @media (orientation: landscape){
        font-size: 12px;
      }
    `
    : ''};
`

export const Search = () => {
  const { translate } = useLexicsStore()
  const {
    clearQuery,
    onQueryChange,
    query,
  } = usePreferencesStore()
  return (
    <Wrapper>
      <Input
        placeholder={translate('search')}
        value={query}
        onChange={onQueryChange}
      />
      {query && <ClearButton onClick={clearQuery} />}
    </Wrapper>
  )
}