export function useFence({height = 20, isCloseTop = false, color = '#ff7f50'}) {
  const { THREE } = window.VgoMap

  const tex = generateTexture(64)
  if(tex) {
    tex.wrapT = tex.wrapS = THREE.RepeatWrapping
  }

  function generateFence(points) {
    const shape = new THREE.Shape()
    shape.setFromPoints(points)
    const geo = new THREE.ExtrudeGeometry(shape, {
      steps: 2,
      depth: height,
      bevelEnabled: false,
    })
    const mater = [
      new THREE.MeshBasicMaterial({
        color,
        transparent: true,
        opacity: 0.1,
        visible: isCloseTop,
      }),
      new THREE.MeshBasicMaterial({
        map: tex,
        transparent: true,
        color,
        opacity: 0.1,
        side: 2,
      })
    ]
    const mesh = new THREE.Mesh(geo, mater)
    mesh.material.forEach(m => m.opacity = 0.7)
    return mesh
  }

  function generateTexture (size = 64) {
    let canvas = document.createElement('canvas')
    canvas.width = size
    canvas.height = size
    let ctx = canvas.getContext('2d')
    if(!ctx) return
    let linearGradient = ctx.createLinearGradient(0, 0, 0, size)
    linearGradient.addColorStop(0.2, hexToRgba(color, 0.0))
    linearGradient.addColorStop(0.8, hexToRgba(color, 0.5))
    linearGradient.addColorStop(1.0, hexToRgba(color, 1.0))
    ctx.fillStyle = linearGradient
    ctx.fillRect(0, 0, size, size)

    let texture = new THREE.Texture(canvas)
    texture.needsUpdate = true // 必须
    return texture
  }

  function hexToRgba (hex, opacity = 1) {
    return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' +
      parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
  }
  
  return {
    generateFence,
  }
}