const canvas = document.querySelector("#clock")
// Match pixel size with screen
canvas.width = canvas.clientWidth
canvas.height = canvas.clientHeight

const ctx = canvas.getContext("2d")

setInterval(draw_face, 200)

function draw_face() {
  const x0 = canvas.width / 2
  const y0 = canvas.height / 2
  const r0 = Math.min(canvas.width, canvas.height) * 0.3
  const p0 = r0 * Math.PI / 8 // the length of the straight part of the pill
  const rd = r0 * 0.9
  const f = r0 * 0.1
  const rm = r0 * 0.8
  const rh = r0 * 0.7
  const rs = r0 * 0.05

  ctx.strokeStyle = "black"
  ctx.fillStyle = "white"
  ctx.beginPath()
  ctx.moveTo(x0, y0 + r0)
  //ctx.lineTo(x0 + p0, y0 + r0)
  ctx.arcTo(x0 + p0 + r0, y0 + r0, x0 + p0 + r0, y0, r0)
  ctx.arcTo(x0 + p0 + r0, y0 - r0, x0, y0 - r0, r0)
  ctx.lineTo(x0 - p0, y0 - r0)
  ctx.arcTo(x0 - p0 - r0, y0 - r0, x0 - p0 - r0, y0, r0)
  ctx.arcTo(x0 - p0 - r0, y0 + r0, x0 - p0 , y0 + r0, r0)
  ctx.closePath()
  ctx.stroke()
  ctx.fill()

  ctx.font = `bold ${f}px sans`
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"
  for (let m = 0; m < 20; m++) {
    const [x, y] = xy(m, rd, x0, y0, p0)
    ctx.strokeText(`${m+1}`, x, y)
  }

  const now = new Date()
  const t = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()
  const oahour = t / (20 * 216)
  const th = t - Math.floor(oahour) * (20 * 216);
  console.log(t, oahour, th)
  const oamin = th / 216

  console.log(oahour, oamin);
  [x, y] = xy(oahour, rh, x0, y0, p0)
  sun(x, y, rs);
  [x, y] = xy(oamin, rm, x0, y0, p0)
  oat(x, y, rs);


  const odsec = t % 216
  const tm = Math.floor(t / 216)
  const odmin = tm % 20
  const odhour = Math.floor(tm / 20) 
  console.log(odhour, odmin, odsec)
  const digital =
    String(odhour+1).padStart(2, "0") + ":" + 
    String(odmin+1).padStart(2, "0") + ":" + 
    String(odsec+1).padStart(3, "0");
  ctx.fillStyle = "#008"
  ctx.fillText(digital, x0, y0)
}

function xy(m, r, x0, y0, p0) {
  let x
  let y
  if (m <= 1) {
    x = x0 + p0 * m
    y = y0 + r
  } else if (m <= 9) {
    x = x0 + + p0 + Math.sin((m - 1) * Math.PI / 8) * r
    y = y0 + Math.cos((m - 1) * Math.PI / 8) * r
  } else if (m <= 11) {
    x = x0 - p0 * (m - 10)
    y = y0 - r
  } else if (m <= 20) {
    x = x0 - p0 - Math.sin((m - 11) * Math.PI / 8) * r
    y = y0 - Math.cos((m - 11) * Math.PI / 8) * r
  }
  return [x, y]
}

function sun(x, y, rs) {
  ctx.beginPath()
  ctx.ellipse(x, y, rs, rs, 0, 2*Math.PI, 0)
  for (let i = 0; i < 7; i++) {
    ctx.moveTo(x + Math.cos(i * Math.PI * 2 / 7) * rs,
               y + Math.sin(i * Math.PI * 2 / 7) * rs)
    ctx.lineTo(x + Math.cos(i * Math.PI * 2 / 7) * rs * 2,
               y + Math.sin(i * Math.PI * 2 / 7) * rs * 2)
  }
  ctx.stroke()
}

function oat(x, y, rs) {
  ctx.beginPath()
  ctx.ellipse(x, y,        rs, rs/2, 0.2*Math.PI, 0,            2*Math.PI)
  ctx.stroke()
  ctx.beginPath()
  ctx.ellipse(x, y - rs/2, rs, rs/2, 0.2*Math.PI, 0.3*Math.PI, 0.7*Math.PI)
  ctx.stroke()
}