text: import React, { useState } from 'react'
  import { Box, Input, Grid, Select, Label } from 'theme-ui'
  import SearchIcon from '../images/icons/search.inline.svg'
  
  import { githubLanguages } from '../data/githubLanguages'
  
  const Search = ({
    searchState,
    onSearchChange,
    onSortChange,
    onFilterChange,
    onSearchIconClick,
  }) => {
    const [valueInput, setValueInput] = useState('')
    const [valueSelectStars, setValueSelectStars] = useState('')
    const [valueSelectLanguage, setValueSelectLanguage] = useState('')
  
    return (
      <Grid columns={[1, 2]}>
        <Box
          sx={{
            width: '100%',
            color: 'text',
            fontFamily: 'inter',
            position: 'relative',
          }}
        >
          <Input
            sx={{
              backgroundColor: 'cardBackground',
              color: 'text',
              borderWidth: 1,
              borderStyle: 'solid',
              borderColor: 'cardBorder',
              borderRadius: 8,
              height: 45,
              fontSize: 15,
              pr: '40px',
              '&:focus': {
                outline: 0,
              },
              '@media only screen and (max-width: 320px)': {
                fontSize: 13,
              },
            }}
            value={valueInput}
            onChange={e => setValueInput(e.target.value)}
            onKeyPress={e =>
              e.key === 'Enter'
                ? onSearchIconClick(
                    valueInput,
                    valueSelectStars,
                    valueSelectLanguage
                  )
                : {}
            }
            placeholder="Search Covid-19 related repos"
          />
  
          <SearchIcon
            style={{
              top: 10,
              right: 10,
              width: 22,
              height: 22,
              cursor: 'pointer',
              position: 'absolute',
            }}
            onClick={() =>
              onSearchIconClick(valueInput, valueSelectStars, valueSelectLanguage)
            }
          />
  
          <Label
            sx={{
              fontSize: 9,
              padding: '0px 3px',
              display: 'block',
              mt: '8px',
              opacity: '0.6',
            }}
          >
            Press Enter when you are done (GitHub API has a rate limit of
            <a
              style={{ cursor: 'pointer', color: 'rgb(255, 65, 54)' }}
              href="https://developer.github.com/v3/search/#rate-limit"
              target="_blank"
              rel="noopener noreferrer"
            >
              <b>&nbsp; 10 requests per minute </b> &nbsp;
            </a>
            if something not working please wait...)
          </Label>
        </Box>
        <Grid
          columns={[2, 2]}
          sx={{
            width: '100%',
            color: 'white',
            fontFamily: 'inter',
          }}
        >
          <Box>
            <Select
              sx={{
                backgroundColor: 'cardBackground',
                color: 'text',
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: 'cardBorder',
                borderRadius: 8,
                height: 45,
                '& + svg': {
                  fill: 'text',
                },
                fontSize: 15,
                '@media only screen and (max-width: 320px)': {
                  fontSize: 13,
                },
                '&:focus': {
                  outline: 0,
                },
              }}
              value={valueSelectStars}
              onChange={e => setValueSelectStars(e.target.value)}
            >
              <option value="stars">Sort by Stars</option>
              <option value="">Sort by Best Match</option>
              <option value="help-wanted-issues">
                Sort by Help Wanted Issues
              </option>
            </Select>
          </Box>
          <Box>
            <Select
              sx={{
                backgroundColor: 'cardBackground',
                color: 'text',
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: 'cardBorder',
                borderRadius: 8,
                height: 45,
                '& + svg': {
                  fill: 'text',
                },
                fontSize: 15,
                '@media only screen and (max-width: 320px)': {
                  fontSize: 13,
                },
                '&:focus': {
                  outline: 0,
                },
              }}
              value={valueSelectLanguage}
              onChange={e => setValueSelectLanguage(e.target.value)}
            >
              <option value="">All Languages</option>
              {githubLanguages.map(lang => (
                <option key={lang} value={lang}>
                  {lang}
                </option>
              ))}
            </Select>
          </Box>
        </Grid>
      </Grid>
    )
  }
  
  export default Search
  