// @flow
import React from "react"
import { connect } from "react-redux"
import { makeStyles } from "@material-ui/styles"
import Grid from "@material-ui/core/Grid"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import Checkbox from "@material-ui/core/Checkbox"
import IconButton from "@material-ui/core/IconButton"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { addToCart } from "actions/cart"

const useStyles = makeStyles({
  listHeaders: {
    borderBottom: "1px solid #888",
    // backgroundColor: "#DCDCDC",
  },
  list: {
    padding: 0,
  },
})

type Props = {
  checkedItems: Array<{
    id: string,
    label: string,
  }>,
  setCheckedItems: Function,
  addToCart: Function,
  handleCheckAllChange: Function,
}

const StrainCatalogListHeader = ({
  checkedItems,
  setCheckedItems,
  addToCart,
  handleCheckAllChange,
}: Props) => {
  const classes = useStyles()
  const checkedItemsLength = checkedItems.length

  const handleCartClick = () => {
    checkedItems.forEach(item => {
      addToCart({
        type: "strain",
        id: item.id,
        name: item.label,
      })
    })
  }

  return (
    <List className={classes.list}>
      <ListItem className={classes.listHeaders}>
        <Grid container spacing={0} alignItems="center">
          <Grid item xs={1}>
            {checkedItemsLength > 0 && (
              <Checkbox
                indeterminate={checkedItemsLength > 0 ? true : false}
                color="default"
                value="selectAll"
                onChange={handleCheckAllChange}
                inputProps={{
                  "aria-label": "checkbox select all",
                }}
              />
            )}
          </Grid>
          {checkedItemsLength > 0 ? (
            <IconButton size="medium" color="default" onClick={handleCartClick}>
              <FontAwesomeIcon icon="cart-plus" />
            </IconButton>
          ) : (
            <>
              <Grid item xs={3}>
                <strong>Strain Descriptor</strong>
              </Grid>
              <Grid item xs={6}>
                <strong>Strain Summary</strong>
              </Grid>
              <Grid item xs={1}>
                <strong>Strain ID</strong>
              </Grid>
              <Grid item xs={1}></Grid>
            </>
          )}
        </Grid>
      </ListItem>
    </List>
  )
}

export default connect<*, *, *, *, *, *>(
  null,
  { addToCart },
)(StrainCatalogListHeader)

@@ -551,11 +551,8 @@
 %0A   
- //
  bac
@@ -571,15 +571,58 @@
 : %22#
-DCDCDC%22
+f6f9fc%22,%0A    color: %22#525f7f%22,%0A    fontWeight: 600
 ,%0A  
@@ -2066,32 +2066,24 @@
             
-%3Cstrong%3E
 Strain Descr
@@ -2087,25 +2087,16 @@
 scriptor
-%3C/strong%3E
 %0A       
@@ -2155,32 +2155,24 @@
             
-%3Cstrong%3E
 Strain Summa
@@ -2173,25 +2173,16 @@
  Summary
-%3C/strong%3E
 %0A       
@@ -2249,16 +2249,8 @@
     
-%3Cstrong%3E
 Stra
@@ -2258,17 +2258,8 @@
 n ID
-%3C/strong%3E
 %0A   

add subtle background and different font color to catalog header #226