import Door, { DoorProps } from './door/index'
import { SVGURI } from '../constant/Element'
import { lineDis, verticalLine, getLineDisSelectPoint } from '../geometry'

interface SlideDoorProps extends DoorProps {
  clipColor?: string,
  within: number,
  bwithin: number
}

/**
 * @category core
 * @subcategory CAD_Architecture
 */
class SlideDoor extends Door {
  layer: SVGPathElement
  clip1: SVGPathElement
  clip2: SVGPathElement
  path1: SVGPathElement
  path2: SVGPathElement
  left: SVGRectElement
  right: SVGRectElement

  constructor({points, foorWidth = 6, foorColor = 'rgba(255,255,255,0.5)', clipColor = 'rgba(0,0,0,1)', linecap = "square", within = 0, ...args}: SlideDoorProps) {
    points[0].fillColor = 'rgba(0,0,0,0)'
    points[1].fillColor = 'rgba(0,0,0,0)'
    super({...args, points, foorWidth, foorColor, within })
    this.clipColor = clipColor
  }

  
  setHoverStyle() {
    this.clipColor = 'rgba(243, 255, 0, 0.8)'
    this.foorColor = 'rgba(243, 255, 0, 0.8)'
  }

  setUnHoverStyle() {
    this.clipColor = 'rgba(0,0,0,1)'
    this.foorColor = 'rgba(255,255,255,0.5)'
  }

  grentNode() {
    
    let node = document.createElementNS(SVGURI, 'g')

    
    this.clip1 = document.createElementNS(SVGURI, 'path')
    node.appendChild(this.clip1)

    this.clip2 = document.createElementNS(SVGURI, 'path')
    node.appendChild(this.clip2)

    this.path1 = document.createElementNS(SVGURI, 'path')
    node.appendChild(this.path1)

    this.path2 = document.createElementNS(SVGURI, 'path')
    node.appendChild(this.path2)

    this.left = document.createElementNS(SVGURI, 'rect')
    this.left.setAttribute('width', '0.00001')
    this.left.setAttribute('height', '0.00001')
    node.appendChild(this.left)

    this.right = document.createElementNS(SVGURI, 'rect')
    this.right.setAttribute('width', '0.00001')
    this.right.setAttribute('height', '0.00001')
    node.appendChild(this.right)
    
    this.nextTick(() => {
      node.appendChild(this.linePoints[0].real)
      node.appendChild(this.linePoints[1].real)

      this.linePoints.forEach(point => {
        point.changeSelect = (isSelect) => {
          isSelect && this.changeSelect(isSelect)
        }
      })
    })
    return node
  }

  update() {
    // if (!this.path1 || !this.clip1 || !this.path2)
    let width = this.foorWidth * this.multiple
    let lineWidth = lineDis({points: this.linePoints})
    let padding =  2 * this.multiple
    let lr = lineWidth * 0.6
    let p1, p2;
    if (this.within) {
      [p1, p2] = this.linePoints
    } else {
      [p2, p1] = this.linePoints
    }

    if (isNaN(p1.x)) return;
    
    let leftr = getLineDisSelectPoint({points: this.linePoints}, p1, lr)
    let leftrc = getLineDisSelectPoint({points: this.linePoints}, p1, lr - padding)
    let rightl = getLineDisSelectPoint({points: this.linePoints}, p2, lr)
    let rightlc = getLineDisSelectPoint({points: this.linePoints}, p2, lr - padding)
    let vv = verticalLine({points: this.linePoints})
    let lrwidth = width / 2
    let marginWidth = lrwidth - padding
    let margin = ((width - lrwidth) / 2) - 0.0001 * this.multiple

    let startl = {
      x: p1.x + vv.x * margin,
      y: p1.y + vv.y * margin
    }
    let endl = {
      x: leftr.x + vv.x * margin,
      y: leftr.y + vv.y * margin,
    }
    let endlc = {
      x: leftrc.x + vv.x * margin,
      y: leftrc.y + vv.y * margin,
    }
    let startr = {
      x: p2.x - vv.x * margin,
      y: p2.y - vv.y * margin
    }
    let endr = {
      x: rightl.x - vv.x * margin,
      y: rightl.y - vv.y * margin,
    }
    let endrc = {
      x: rightlc.x - vv.x * margin,
      y: rightlc.y - vv.y * margin,
    }

    this.path1.setAttribute('stroke', this.foorColor)
    this.path1.setAttribute('stroke-width', lrwidth.toString())
    this.path1.setAttribute('d', `M ${startl.x} ${startl.y} L ${endl.x} ${endl.y}`)
    
    this.clip1.setAttribute('stroke', this.clipColor)
    this.clip1.setAttribute('stroke-width', (lrwidth - this.bwithin * this.multiple) .toString())
    this.clip1.setAttribute('d', `M ${startl.x} ${startl.y} L ${endlc.x} ${endlc.y}`)

    this.path2.setAttribute('stroke', this.foorColor)
    this.path2.setAttribute('stroke-width', (lrwidth).toString())
    this.path2.setAttribute('d', `M ${startr.x} ${startr.y} L ${endr.x} ${endr.y}`)

    this.clip2.setAttribute('stroke', this.clipColor)
    this.clip2.setAttribute('stroke-width', (lrwidth - this.bwithin * this.multiple) .toString())
    this.clip2.setAttribute('d', `M ${startr.x} ${startr.y} L ${endrc.x} ${endrc.y}`)

    this.left.setAttribute('x', p1.x.toString())
    this.left.setAttribute('y', p1.y.toString())
    this.left.setAttribute('stroke-width', width.toString())
    this.left.setAttribute('stroke', 'rgba(0,0,0,0)')
    this.right.setAttribute('x', p2.x.toString())
    this.right.setAttribute('y', p2.y.toString())
    this.right.setAttribute('stroke-width', width.toString())
    this.right.setAttribute('stroke', 'rgba(0,0,0,0)')
    this.attachment.update()
  }
}

export default SlideDoor