const data = useSelector(state => state.graph)
const [graphData, setGraphData] = useState(
  data.graphData || {
    Austrailia: 500,
    India: 1800,
    USA: 500,
    Brasil: 2100,
    China: 1500,
  }
)
const entries = Object.entries(graphData)

const [country, setCountry] = useState(data.country || '')
const [population, setPopulation] = useState(data.population || '')
const [country2, setCountry2] = useState('')
const [errorMessage, setErrorMessage] = useState('')
const inputRef1 = useRef()
const inputRef2 = useRef()

useEffect(() => {
  let canvasElem = document.querySelector('canvas')
  canvasElem.width = 840
  canvasElem.height = 320
  const ctx = canvasElem.getContext('2d')
  drawGrid(canvasElem, ctx)
  drawAxis(ctx)
  drawChart(ctx)
})

const drawGrid = (canvasElem, ctx) => {
  let xGrid = 10
  let yGrid = 10
  let cellSize = 10
  ctx.beginPath()
  while (xGrid < canvasElem.height) {
    ctx.moveTo(0, xGrid)
    ctx.lineTo(canvasElem.width, xGrid)
    xGrid += cellSize
  }
  while (yGrid < canvasElem.width) {
    ctx.moveTo(yGrid, 0)
    ctx.lineTo(yGrid, canvasElem.height)
    yGrid += cellSize
  }
  ctx.strokeStyle = '#ccc'
  ctx.stroke()
}

const drawAxis = ctx => {
  let yPlot = 300
  let pop = 0

  ctx.beginPath()
  ctx.strokeStyle = 'black'
  ctx.moveTo(50, 50)
  ctx.lineTo(50, 300)
  ctx.lineTo(800, 300)
  ctx.moveTo(50, 300)

  for (let i = 0; i < 10; i++) {
    ctx.strokeText(pop, 20, yPlot)
    pop += 500
    yPlot -= 50
  }
  ctx.stroke()
}

const drawChart = ctx => {
  ctx.beginPath()
  ctx.strokeStyle = 'black'
  ctx.moveTo(50, 300)
  ctx.font = 'bold normal 10px Verdana'

  var xPlot = 100
  let i = 0

  for (const [country, population] of entries) {
    var populationInBlocks = population / 10
    ctx.fillText(
      country + '(' + population + ')',
      xPlot,
      i % 2 === 0
        ? 300 - populationInBlocks - 10
        : 300 - populationInBlocks - 10 + 30
    )
    ctx.lineTo(xPlot, 300 - populationInBlocks)
    ctx.arc(xPlot, 300 - populationInBlocks, 2, 0, Math.PI * 2, true)
    xPlot += 50
    i++
  }
  ctx.stroke()
}

const submitHandler1 = e => {
  console.log(graphData)
  e.preventDefault()

  if (
    isNaN(Number(population)) ||
    Number(population) > 2500 ||
    Number(population) < 0
  ) {
    setErrorMessage('0~2500사이의 값을 입력하세요.')
    return
  }
  let obj = { ...graphData }
  obj[country] = Number(population)
  // obj.county = population not same!!
  let graphData_temp = Object.assign({}, obj)
  setGraphData(graphData_temp)
  setCountry('')
  setPopulation('')
  setErrorMessage('')
  inputRef1.current.focus()
}