// @flow
import React from "react"
import { makeStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"
import Paper from "@material-ui/core/Paper"
import InputBase from "@material-ui/core/InputBase"
import IconButton from "@material-ui/core/IconButton"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import AppBarDropdown from "./AppBarDropdown"
import { useAppBarState } from "./AppBarContext"
import { appBarTypes } from "constants/appBar"
import { catalogTypes } from "constants/catalogs"

const useStyles = makeStyles(theme => ({
  root: {
    padding: "2px 4px",
    minWidth: 400,
  },
  input: {
    marginLeft: theme.spacing(1),
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  separator: {
    borderLeftColor: "#bfbfbf",
    borderLeftStyle: "solid",
    borderLeftWidth: "1px",
    display: "inline-block",
    height: "30px",
    verticalAlign: "middle",
    paddingRight: "4px",
  },
}))

type Props = {
  query: string,
  dropdownItems: Array<{
    value: string,
    name: string,
  }>,
  catalogDispatch: Function,
}

/**
 * AppBarSearch is the search box found on a stock catalog page.
 */

const AppBarSearch = ({ query, dropdownItems, catalogDispatch }: Props) => {
  const [{ searchValue, filter }, dispatch] = useAppBarState()
  const classes = useStyles()

  const handleChange = event => {
    dispatch({
      type: appBarTypes.SET_SEARCH_VALUE,
      payload: event.target.value,
    })
  }

  const handleSubmit = event => {
    event.preventDefault()
    catalogDispatch({
      type: catalogTypes.SET_QUERY,
      payload: query,
    })
    catalogDispatch({
      type: catalogTypes.SET_QUERY_VARIABLES,
      payload: { cursor: 0, filter: `${filter}~${searchValue}` },
    })
  }

  const clearSearch = () => {
    dispatch({
      type: appBarTypes.SET_SEARCH_VALUE,
      payload: "",
    })
    catalogDispatch({
      type: catalogTypes.SET_QUERY,
      payload: query,
    })
    catalogDispatch({
      type: catalogTypes.SET_QUERY_VARIABLES,
      payload: { cursor: 0, filter: `${filter}~${searchValue}` },
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <Paper className={classes.root}>
        <Grid container alignItems="center">
          <IconButton
            className={classes.iconButton}
            aria-label="Catalog search icon"
            title="Search catalog">
            <FontAwesomeIcon icon="search" size="sm" />
          </IconButton>
          <InputBase
            className={classes.input}
            placeholder="Search..."
            inputProps={{ "aria-label": "search" }}
            onChange={handleChange}
            value={searchValue}
          />
          <IconButton
            className={classes.iconButton}
            title="Clear search box"
            aria-label="clear search box"
            onClick={clearSearch}>
            <FontAwesomeIcon icon="times" size="sm" />
          </IconButton>
          <div className={classes.separator} />
          <AppBarDropdown dropdownItems={dropdownItems} />
        </Grid>
      </Paper>
    </form>
  )
}

export default AppBarSearch

@@ -1339,39 +1339,48 @@
 nst 
-handleChange = event
+resetQueryVariables = ()
  =%3E
- %7B
 %0A    
-d
+catalogD
 ispa
@@ -1389,38 +1389,39 @@
 h(%7B%0A      type: 
-appBar
+catalog
 Types.SET_SEARCH
@@ -1410,36 +1410,39 @@
 ogTypes.SET_
-SEARCH_VALUE
+QUERY_VARIABLES
 ,%0A      payl
@@ -1450,34 +1450,65 @@
 ad: 
-event.target.value
+%7B cursor: 0, filter: %60$%7Bfilter%7D~$%7BsearchValue%7D%60 %7D
 ,%0A    %7D)
 %0A  %7D
@@ -1495,36 +1495,32 @@
 alue%7D%60 %7D,%0A    %7D)
-%0A  %7D
 %0A%0A  const handle
@@ -1517,60 +1517,26 @@
 nst 
-handleSubmit = event =%3E %7B%0A    event.preventDefault()
+resetQuery = () =%3E
 %0A   
@@ -1615,36 +1615,64 @@
 ery,%0A    %7D)%0A
-    catalogD
+%0A  const handleChange = event =%3E %7B%0A    d
 ispatch(%7B%0A  
@@ -1673,39 +1673,38 @@
 h(%7B%0A      type: 
-catalog
+appBar
 Types.SET_QUERY_
@@ -1693,39 +1693,36 @@
 arTypes.SET_
-QUERY_VARIABLES
+SEARCH_VALUE
 ,%0A      payl
@@ -1730,410 +1730,303 @@
 ad: 
-%7B cursor: 0, filter: %60$%7Bfilter%7D~$%7BsearchValue%7D%60 %7D,%0A    %7D)%0A  %7D%0A%0A  const clearSearch = () =%3E %7B%0A    dispatch(%7B%0A      type: appBarTypes.SET_SEARCH_VALUE,%0A      payload: %22%22,%0A    %7D)%0A    catalogDispatch(%7B%0A      type: catalogTypes.SET_QUERY,%0A      payload: query,%0A    %7D)%0A    catalogDispatch(%7B%0A      type: catalogTypes.SET_QUERY_VARIABLES,%0A      payload: %7B cursor: 0, filter: %60$%7Bfilter%7D~$%7BsearchValue%7D%60 %7D,%0A    %7D
+event.target.value,%0A    %7D)%0A  %7D%0A%0A  const handleSubmit = event =%3E %7B%0A    event.preventDefault()%0A    resetQuery()%0A    resetQueryVariables()%0A  %7D%0A%0A  const clearSearch = () =%3E %7B%0A    dispatch(%7B%0A      type: appBarTypes.SET_SEARCH_VALUE,%0A      payload: %22%22,%0A    %7D)%0A    resetQuery()%0A    resetQueryVariables(
 )%0A  

place redundant code into variables