// @flow

import React, { useMemo } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
  faArrowsAlt,
  faMousePointer,
  faExpandArrowsAlt,
  faGripLines,
  faTag,
  faPaintBrush,
  faCrosshairs,
  faDrawPolygon,
  faVectorSquare,
  faHandPaper,
  faSearch,
  faMask,
} from "@fortawesome/free-solid-svg-icons"
import SmallToolButton, { SelectedTool } from "../SmallToolButton"
import { makeStyles } from "@material-ui/core/styles"
import { grey } from "@material-ui/core/colors"
import { SearchOutlined, AimOutlined, TagFilled, GatewayOutlined, RadarChartOutlined } from "@ant-design/icons"

const useStyles = makeStyles({
  iconTools: {
    display: "flex",
    padding: 4,
    flexDirection: "column",
    zIndex: 9,
    boxShadow: "0px 0px 5px rgba(0,0,0,0.1)",
    borderRight: `1px solid ${grey[300]}`,
    backgroundColor: grey[100],
  },
  grow: { flexGrow: 1 },
})

const defaultTools = [
  "select",
  "create-point",
  "create-box",
  "create-polygon",
  "create-expanding-line",
]

export const IconTools = ({
  showTags,
  showMask,
  selectedTool,
  onClickTool,
  enabledTools = defaultTools,
  displayTools,
}) => {
  const classes = useStyles()
  const selectedToolContextValue = useMemo(
    () => ({ enabledTools, selectedTool, onClickTool }),
    [enabledTools, selectedTool]
  );

  let displayTool = {};
  for(let i = 0; i < displayTools.split(",").length; i++){
    displayTool[displayTools.split(",")[i]] = true;
  }


  return (
    <div className={classes.iconTools}>
      <SelectedTool.Provider value={selectedToolContextValue}>
        <SmallToolButton
          id="select"
          name="Select Region"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faMousePointer}/>}
          title="W"
        />
        <SmallToolButton
          alwaysShowing
          id="pan"
          name="Drag/Pan"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faHandPaper} />}
          title="S"
        />
        <SmallToolButton
          alwaysShowing
          id="zoom"
          name="Zoom In/Out"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faSearch} />}
          // icon={<FontAwesomeIcon size="xs" fixedWidth icon={SearchOutlined} />}
          title="Z"
        />
        {/* <SmallToolButton
          name="Move Region"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faArrowsAlt} />}
        />
        <SmallToolButton
          name="Resize Region"
          icon={
            <FontAwesomeIcon size="xs" fixedWidth icon={faExpandArrowsAlt} />
          }
        /> */}
        <SmallToolButton
          alwaysShowing
          togglable
          id="show-tags"
          selected={showTags}
          name="Show Tags"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faTag} />}
          // icon={<FontAwesomeIcon size="xs" fixedWidth icon={TagFilled} />}
          title="T"
        />
        {displayTool['14'] ?
        <SmallToolButton
          id="create-point"
          name="Add Point"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faCrosshairs} />}
          // icon={<FontAwesomeIcon size="xs" fixedWidth icon={AimOutlined} />}
          title="P"
        />
        :
        null}
         {displayTool['11'] ?
        <SmallToolButton
          id="create-box"
          name="Add Bounding Box"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faVectorSquare} />}
          // icon={<FontAwesomeIcon size="xs" fixedWidth icon={GatewayOutlined} />}
          title="B"
        />
        :
        null}
         {displayTool['12'] ?
        <SmallToolButton
          id="create-polygon"
          name="Add Polygon"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faDrawPolygon} />}
          // icon={<FontAwesomeIcon size="xs" fixedWidth icon={RadarChartOutlined} />}
          title="G"
        />
        :
        null}
        {/* <SmallToolButton
          id="create-expanding-line"
          name="Add Expanding Line"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faGripLines} />}
        /> */}
        {/* <SmallToolButton
          togglable
          selected={showMask}
          id="show-mask"
          name="Show / Hide Mask"
          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faMask} />}
          title="Show / Hide Mask"
        /> */}
      </SelectedTool.Provider>
    </div>
  )
}

export default IconTools