type tool =
  | Pen
  | Highlighter
  | Text

type color =
  | Black
  | Red
  | Blue
  | Yellow

type sketchState = {
  isActive: bool,
  tool: tool,
  color: color,
  strokeWidth: float,
}

let initialState: sketchState = {
  isActive: false,
  tool: Pen,
  color: Black,
  strokeWidth: 2.0,
}

let colorToHex = (color: color) =>
  switch color {
  | Black => "#000000"
  | Red => "#ef4444"
  | Blue => "#3b82f6"
  | Yellow => "#eab308"
  }

let toolToOpacity = (tool: tool) =>
  switch tool {
  | Highlighter => 0.3
  | Pen | Text => 1.0
  }

let isHighlighter = (tool: tool) =>
  switch tool {
  | Highlighter => true
  | Pen | Text => false
  }

let toolToWidth = (tool: tool, base: float) =>
  switch tool {
  | Highlighter => base *. 8.0
  | Pen => base
  | Text => base
  }

let use = () => {
  let (state, setState) = React.useState(() => initialState)

  let activate = () => setState(prev => {...prev, isActive: true})

  let deactivate = () => setState(prev => {...prev, isActive: false})

  let toggle = () => setState(prev => {...prev, isActive: !prev.isActive})

  let setTool = (tool: tool) => setState(prev => {...prev, tool})

  let setColor = (color: color) => setState(prev => {...prev, color})

  (state, activate, deactivate, toggle, setTool, setColor)
}