export default (part) => {
  let { Point, points, Path, paths, options } = part.shorthand()

  /**
   * Returs the value passed to it randomized with a given tolerance
   */
  const about = (value, tolerance = 5) => {
    let randomized = (tolerance / 100) * Math.random() * value
    let fixed = (1 - tolerance / 100) * value

    return fixed + randomized
  }

  /**
   * like about, but also randomly makes value negative
   * This is for degrees
   */
  const nabout = (value, tolerance = 5) => {
    if (Math.random() > 0.5) return about(value, tolerance)
    else return -1 * about(value, tolerance)
  }

  /**
   * Draws a w*h box that's randomized by tolerance to give it
   * that hand-drawn look.
   *
   * Returns a Path object
   */
  const box = (name, origin, width, height, tolerance = 10) => {
    let base = height
    if (width < height) base = width
    let t = base * (tolerance / 100)
    points[name + 'TopLeft'] = new Point(about(origin.x, t), about(origin.y, t))
    points[name + 'BottomLeft'] = new Point(about(origin.x, t), about(origin.y + height, t))
    points[name + 'BottomRight'] = new Point(
      about(origin.x + width, t),
      about(origin.y + height, t)
    )
    points[name + 'TopRight'] = new Point(about(origin.x + width, t), about(origin.y, t))
    points[name + 'Mid'] = points[name + 'TopLeft'].shiftFractionTowards(
      points[name + 'BottomRight'],
      0.5
    )
    points[name + 'Mid'].y += 3

    let f = 0.3
    let r = tolerance / 2
    points[name + 'TopLeftCp1'] = points[name + 'TopLeft']
      .shiftFractionTowards(points[name + 'BottomLeft'], about(f))
      .rotate(nabout(r), points[name + 'TopLeft'])
    points[name + 'TopLeftCp2'] = points[name + 'TopLeft']
      .shiftFractionTowards(points[name + 'TopRight'], about(f))
      .rotate(nabout(r), points[name + 'TopLeft'])
    points[name + 'BottomLeftCp1'] = points[name + 'BottomLeft']
      .shiftFractionTowards(points[name + 'TopLeft'], about(f))
      .rotate(nabout(r), points[name + 'BottomLeft'])
    points[name + 'BottomLeftCp2'] = points[name + 'BottomLeft']
      .shiftFractionTowards(points[name + 'BottomRight'], about(f))
      .rotate(nabout(r), points[name + 'BottomLeft'])
    points[name + 'BottomRightCp1'] = points[name + 'BottomRight']
      .shiftFractionTowards(points[name + 'BottomLeft'], about(f))
      .rotate(nabout(r), points[name + 'BottomRight'])
    points[name + 'BottomRightCp2'] = points[name + 'BottomRight']
      .shiftFractionTowards(points[name + 'TopRight'], about(f))
      .rotate(nabout(r), points[name + 'BottomRight'])
    points[name + 'TopRightCp1'] = points[name + 'TopRight']
      .shiftFractionTowards(points[name + 'BottomRight'], about(f))
      .rotate(nabout(r), points[name + 'TopRight'])
    points[name + 'TopRightCp2'] = points[name + 'TopRight']
      .shiftFractionTowards(points[name + 'TopLeft'], about(f))
      .rotate(nabout(r), points[name + 'TopRight'])

    return new Path()
      .move(points[name + 'TopLeft'])
      .curve(
        points[name + 'TopLeftCp1'],
        points[name + 'BottomLeftCp1'],
        points[name + 'BottomLeft']
      )
      .curve(
        points[name + 'BottomLeftCp2'],
        points[name + 'BottomRightCp1'],
        points[name + 'BottomRight']
      )
      .curve(
        points[name + 'BottomRightCp2'],
        points[name + 'TopRightCp1'],
        points[name + 'TopRight']
      )
      .curve(points[name + 'TopRightCp2'], points[name + 'TopLeftCp2'], points[name + 'TopLeft'])
      .close()
      .attr('class', options.focus === name ? 'note' : 'fabric')
  }

  /**
   * Draws an arrow from to
   * Returns a Path object
   */
  const arrow = (name, text = '', tolerance = 10) => {
    let from = points[name + 'From']
    let to = points[name + 'To']
    from = from.shiftTowards(to, 3)
    to = to.shiftTowards(from, 3)
    let base = from.dist(to)
    let t = base * (tolerance / 100)
    from.x = about(from.x, t)
    from.x = about(from.x, t)
    to.x = about(to.x, t)
    to.x = about(to.x, t)
    let f = 0.3
    let r = tolerance / 2
    points[name + 'FromCp'] = from.shiftFractionTowards(to, about(f)).rotate(nabout(r), from)
    points[name + 'ToCp'] = to.shiftFractionTowards(from, about(f)).rotate(nabout(r), to)
    points[name + 'Tip1'] = to.shiftTowards(from, about(3.8)).rotate(about(15), to)
    points[name + 'Tip2'] = to.shiftTowards(from, about(3.5)).rotate(about(-15), to)
    let path = new Path()
      .move(from)
      .curve(points[name + 'FromCp'], points[name + 'ToCp'], to)
      .move(points[name + 'Tip1'])
      .line(to)
      .line(points[name + 'Tip2'])
      .attr('class', 'fabric')
    if (options.focus === name) path = path.attr('class', 'note')
    if (text)
      return path
        .attr('data-text', '  ' + text)
        .attr('data-text-class', 'scribble')
        .attr('data-text-class', options.focus === name ? 'fill-note' : '')
    else return path
  }

  const drawBox = (name, x, y, width, height, tolerance = 5, text = true) => {
    points[name + 'Origin'] = new Point(x, y)
    paths[name] = box(name, points[name + 'Origin'], width, height, tolerance)
    if (text) {
      points[name + 'Mid'].attr('data-text', name).attr('data-text-class', 'center scribble')
      if (options.focus === name) points[name + 'Mid'].attr('data-text-class', 'fill-note')
    }
  }

  const svgLogo = (anchor, size = 1) => {
    points.svg15 = anchor
      .shift(45, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg3 = anchor
      .shift(0, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg45 = anchor
      .shift(-45, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg6 = anchor
      .shift(-90, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg75 = anchor
      .shift(-135, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg9 = anchor
      .shift(180, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg105 = anchor
      .shift(135, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svg12 = anchor
      .shift(90, 4 * size)
      .attr('data-circle', 1.2 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.svgText = anchor
      .clone()
      .attr('data-text', 'SVG')
      .attr('data-text-class', 'text-xl scribble')
    points.svgText.x += size * 7
    points.svgText.y += 6
    paths.svgLogo = new Path()
      .move(points.svg15)
      .line(points.svg75)
      .move(points.svg3)
      .line(points.svg9)
      .move(points.svg45)
      .line(points.svg105)
      .move(points.svg6)
      .line(points.svg12)
      .attr('class', 'stroke-l')
  }
  const reactLogo = (anchor, size = 1) => {
    h = 3 * size
    w = 6 * size
    points.reactTop1 = anchor.shift(45, w)
    points.reactBottom1 = anchor.shift(-135, w)
    points.reactTop1Cp1 = points.reactTop1.shift(135, h)
    points.reactTop1Cp2 = points.reactTop1.shift(-45, h)
    points.reactBottom1Cp1 = points.reactBottom1.shift(135, h)
    points.reactBottom1Cp2 = points.reactBottom1.shift(-45, h)
    points.reactTop2 = points.reactTop1.rotate(60, anchor)
    points.reactBottom2 = points.reactBottom1.rotate(60, anchor)
    points.reactTop2Cp1 = points.reactTop1Cp1.rotate(60, anchor)
    points.reactTop2Cp2 = points.reactTop1Cp2.rotate(60, anchor)
    points.reactBottom2Cp1 = points.reactBottom1Cp1.rotate(60, anchor)
    points.reactBottom2Cp2 = points.reactBottom1Cp2.rotate(60, anchor)
    points.reactTop3 = points.reactTop1.rotate(-60, anchor)
    points.reactBottom3 = points.reactBottom1.rotate(-60, anchor)
    points.reactTop3Cp1 = points.reactTop1Cp1.rotate(-60, anchor)
    points.reactTop3Cp2 = points.reactTop1Cp2.rotate(-60, anchor)
    points.reactBottom3Cp1 = points.reactBottom1Cp1.rotate(-60, anchor)
    points.reactBottom3Cp2 = points.reactBottom1Cp2.rotate(-60, anchor)
    points.svgLogo = anchor
      .clone()
      .attr('data-circle', 1 * size)
      .attr('data-circle-class', 'fill-fabric')
    points.reactText = anchor
      .clone()
      .attr('data-text', 'React')
      .attr('data-text-class', 'text-xl scribble')
    points.reactText.x += size * 7
    points.reactText.y += 6

    paths.reactLogo = new Path()
      .move(points.reactTop1)
      .curve(points.reactTop1Cp1, points.reactBottom1Cp1, points.reactBottom1)
      .curve(points.reactBottom1Cp2, points.reactTop1Cp2, points.reactTop1)
      .close()
      .move(points.reactTop2)
      .curve(points.reactTop2Cp1, points.reactBottom2Cp1, points.reactBottom2)
      .curve(points.reactBottom2Cp2, points.reactTop2Cp2, points.reactTop2)
      .close()
      .move(points.reactTop3)
      .curve(points.reactTop3Cp1, points.reactBottom3Cp1, points.reactBottom3)
      .curve(points.reactBottom3Cp2, points.reactTop3Cp2, points.reactTop3)
      .close()
  }

  // Other parts first so they're behind
  drawBox('Part4', 4, -19, 40, 65, 5, false)
  drawBox('Part3', 1, -16, 40, 65, 5, false)
  drawBox('Part2', -2, -13, 40, 65, 5, false)
  drawBox('Part', -5, -10, 40, 65, 5)
  paths.Part4.attr('class', 'fill-bg')
  paths.Part3.attr('class', 'fill-bg')
  paths.Part2.attr('class', 'fill-bg')
  paths.Part.attr('class', 'fill-bg')
  points.PartMid.y = points.PartTopLeft.y + 9
  let x = 0
  let y = 0
  let w = 30
  let h = 15
  drawBox('Points', x, y, w, h)
  y += 18
  drawBox('Paths', x, y, w, h)
  y += 18
  drawBox('Snippets', x, y, w, h)
  x = -35
  y = -3
  w = 25
  h = 20
  drawBox('config', x, y, w, h)
  y += 23
  drawBox('Store', x, y, w, h)
  x = -40
  y = -30
  drawBox('Pattern', x, y, 90, 90)
  points.PatternMid.y = points.PatternTopLeft.y + 9

  drawBox('settings', -100, 6, 40, 20)
  drawBox('draft', 80, 3, 20, 25)

  points.arrow1From = points.settingsTopRight.shiftFractionTowards(points.settingsBottomRight, 0.5)
  points.arrow1To = points.PatternTopLeft.shiftFractionTowards(points.PatternBottomLeft, 0.5)
  paths.arrow1 = arrow('arrow1')
  points.arrow2From = points.PatternTopRight.shiftFractionTowards(points.PatternBottomRight, 0.5)
  points.arrow2To = points.draftTopLeft.shiftFractionTowards(points.draftBottomLeft, 0.5)
  paths.arrow2 = arrow('arrow2', 'draft()')

  svgLogo(points.draftMid.shift(70, 50))
  reactLogo(points.draftMid.shift(-80, 36))

  points.arrow3From = points.draftTopLeft.shiftFractionTowards(points.draftTopRight, 0.5)
  points.arrow3To = points.svgText.clone()
  paths.arrow3 = arrow('arrow3', 'render()')
  points.arrow4From = points.draftBottomLeft.shiftFractionTowards(points.draftBottomRight, 0.5)
  points.arrow4To = points.reactText.clone().shift(40, 15)
  paths.arrow4 = arrow('arrow4')

  paths.extend = new Path()
    .move(points.draftTopRight)
    .line(points.draftTopRight.shift(0, 40))
    .attr('class', 'hidden')

  return part
}