// @flow
import React from 'react';
import styled from 'styled-components';
import SearchIconButton from '../../Atom/SearchIconButton/SearchIconButton';
import SearchInput from '../../Atom/SearchInput/SearchInput';
import defaultTheme from '../../../Theme/ApoliticalBrand';

type Props = {|
  textInput: any,
  +className?: string,
|}

const SearchWrapper = styled.div`
  transition: opacity .45s ease, transform .45s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: ${defaultTheme.remify(43)};
  transform: translate3d(0, 0, 0);
  width: 100%;

  @media only screen and (max-width: 767px) {
    transition: opacity .45s ease, transform .45s ease;
    padding-left: ${defaultTheme.remify(40)};
    padding-right: ${defaultTheme.remify(15)};
    margin-left: 0;
    width: 100%;
    font-weight: 100;
    border: 0;
    background: #fff;
    button {
      display: none;
    };
  };
`;

const ScreenReaderText = styled.span`
  display: none;
`;

const SearchBar = ({ textInput, className }: Props) => (
  <SearchWrapper className={className}>
    <ScreenReaderText>
      Search for:
    </ScreenReaderText>
    <SearchIconButton type="light" />
    <SearchInput textInput={textInput} />
  </SearchWrapper>
);

SearchBar.defaultProps = {
  className: '',
};


export default SearchBar;