import {CADElement, ElementProps} from '../core/element'
import {SVGURI} from '../constant/Element'
import {Point} from '../geometry'
import Renderer from '../base/renderer'
import { point } from '../core/fixedpoint'

export interface StyleProps {
  border?: number,
  r?: number,
  show?: boolean,
  selectColor?: string,
  text?: string,
  color?: string
}

export interface SeftProps extends ElementProps  {
  points: Array<Point & {text: string}>
  selectIndex: number,
  room: Array<point>,
  selectDom: boolean
}

class SelectPoint extends CADElement<SeftProps & StyleProps> {
  pointEles: Array<[SVGCircleElement, SVGTextElement]>
  polygon: SVGPathElement
  
  static Setting = new Map<Renderer, StyleProps>()

  constructor({border = 1, r = 4, show = true, color = 'rgb(0, 200, 175)', selectDom = false, selectColor = 'rgb(0, 200, 175)', ...args} : SeftProps & StyleProps) {
    super({border, r, show, color, selectColor, selectDom, ...args})
    this.update()
  }

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

    this.polygon = document.createElementNS(SVGURI, 'path')
    this.polygon.setAttribute('stroke', this.selectColor)
    this.polygon.setAttribute('d', `M ${this.room.map(point => point.x + ' ' + point.y).join(' L ')} Z`)
    this.polygon.setAttribute('fill', 'rgba(0,0,0,0)')

    this.pointEles = this.points.map(() => {
      let inner = document.createElementNS(SVGURI, 'circle')
      inner.setAttribute('stroke', '#fff')
      
      let text = document.createElementNS(SVGURI, 'text')
      text.setAttribute('fill', '#fff')
      text.setAttribute('text-anchor', 'middle')
      text.setAttribute('dy', '.4em')

      node.appendChild(inner)
      node.appendChild(text)
      return [inner, text]
    })


    node.appendChild(this.polygon)
    return node
  }

  setHoverStyle() {
    this.selectDom = true
  }
  setUnHoverStyle() {
    this.selectDom = false
  }

  click(ev) {
    let selectIndex = this.pointEles.findIndex(([ele, text]) => 
      ele === ev.target ||
      text === ev.target ||
      ele.contains(ev.target) || 
      text.contains(ev.target)
    )

    if (this.selectIndex === selectIndex) {
      this.selectIndex = -1
    } else {
      this.selectIndex = selectIndex
    }
  }

  update() {
    
    if (this.selectDom || ~this.selectIndex) {
      this.polygon.setAttribute('stroke-width', (4 * this.multiple).toString())
      this.polygon.style.display = 'block'
    } else {
      this.polygon.style.display = 'none'
    }
      this.polygon.style.display = 'none'

    this.pointEles.forEach(([inner, text], i) => {
      inner.setAttribute('fill', this.selectIndex === i ? this.selectColor : this.color)
      inner.setAttribute('r', (this.r * this.multiple).toString())
      inner.setAttribute('stroke-width', (this.border * this.multiple).toString())
      inner.setAttribute('cx', this.points[i].x.toString())
      inner.setAttribute('cy', this.points[i].y.toString())
      
      text.setAttribute('font-size', (12 * this.multiple).toString())
      text.setAttribute('x', this.points[i].x.toString())
      text.setAttribute('y', this.points[i].y.toString())
      text.textContent = this.points[i].text
      text.setAttribute('fill', '#fff')
    })
    
    this.real.style.display = this.show ? 'inherit': 'none'
  }
}

export default SelectPoint