// @flow
import React from "react"
import { Link } from "react-router-dom"
import Typography from "@material-ui/core/Typography"
import Grid from "@material-ui/core/Grid"
import IconButton from "@material-ui/core/IconButton"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import useStyles from "components/Stocks/Details/styles"

type Props = {
  /** Stock ID */
  id: string,
  /** Strain descriptor or plasmid name */
  name: string,
  /** Type of stock (strain or plasmid) */
  stockType: string,
}

/**
 * DetailsHeader is the header at the top of every stock details page.
 */

const DetailsHeader = ({ name, id, stockType }: Props) => {
  const classes = useStyles()

  return (
    <Grid item xs={12} className={classes.header}>
      <Grid container alignItems="center">
        <Grid item xs={1} className={classes.backButton}>
          <IconButton
            component={Link}
            to="/strains"
            title="Back to strain catalog"
            aria-label="strain catalog">
            <FontAwesomeIcon icon="arrow-left" size="lg" />
          </IconButton>
        </Grid>
        <Grid item xs={10}>
          <Typography variant="h4">{name}</Typography>
          <Typography variant="h6" color="textSecondary">
            <em>{id}</em>{" "}
            <IconButton
              onClick={() => {
                navigator.clipboard.writeText(id)
              }}
              title="Copy ID to clipboard"
              aria-label="copy icon">
              <FontAwesomeIcon icon="copy" size="xs" />
            </IconButton>{" "}
          </Typography>
        </Grid>
        <Grid item xs={1}></Grid>
      </Grid>
    </Grid>
  )
}

export default DetailsHeader

@@ -918,18 +918,26 @@
  to=
-%22/strains%22
+%7B%60/$%7BstockType%7Ds%60%7D
 %0A   
@@ -955,17 +955,18 @@
 tle=
-%22
+%7B%60
 Back to 
 stra
@@ -961,30 +961,36 @@
 Back to 
-strain
+$%7BstockType%7D
  catalog
 %22%0A      
@@ -981,17 +981,18 @@
  catalog
-%22
+%60%7D
 %0A       
@@ -1012,22 +1012,23 @@
 el=%22
-strain
+back to
  catalog
 %22%3E%0A 
@@ -1023,16 +1023,21 @@
  catalog
+ page
 %22%3E%0A     

update DetailsHeader to go back to correct catalog page