import React from 'react'
import Path from '../Path'
import Point from '../Point'
import Snippet from '../Snippet'
import { getProps } from '../utils'

const Part = (props) => {
  const focusPoint = (point, i) => {
    const p = props.part.points[point]
    const pathString = `M ${p.x} ${props.part.topLeft.y} `
      + `L ${p.x} ${props.part.bottomRight.y} `
      + `M ${props.part.topLeft.x} ${p.y} `
      + `L ${props.part.bottomRight.x} ${p.y} `
    const classes = 'focus point c' + (i % 8) // Cycle through 8 colors
    return (
      <React.Fragment key={'fp' + point}>
        <path d={pathString} className={classes} />
        <circle
          cx={p.x}
          cy={p.y}
          r="5"
          className="contrast"
          onClick={() =>
            props.raiseEvent('clearFocus', {
              part: props.name,
              type: 'points',
              name: point
            })
          }
        />
      </React.Fragment>
    )
  }

  const focusCoords = (p, i) => {
    let pathString = `M ${p.x} ${props.part.topLeft.y} `
    pathString += `L ${p.x} ${props.part.bottomRight.y} `
    pathString += `M ${props.part.topLeft.x} ${p.y} `
    pathString += `L ${props.part.bottomRight.x} ${p.y} `
    let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
    return (
      <React.Fragment key={'cp' + i}>
        <path d={pathString} className={classes} />
        <circle
          cx={p.x}
          cy={p.y}
          r="5"
          className={classes}
          onClick={() =>
            props.raiseEvent('clearFocus', {
              part: props.name,
              type: 'coords',
              data: p
            })
          }
        />
      </React.Fragment>
    )
  }

  let grid = props.paperless ? (
    <rect
      x={props.part.topLeft.x}
      y={props.part.topLeft.y}
      width={props.part.width}
      height={props.part.height}
      className="grid"
      fill={'url(#grid-' + props.name + ')'}
    />
  ) : null

  let focus = []
  if (props.develop) {
    if (props.focus && typeof props.focus[props.name] !== 'undefined') {
      for (let i in props.focus[props.name].points)
        focus.push(focusPoint(props.focus[props.name].points[i], i))
      for (let i in props.focus[props.name].paths) {
        let name = props.focus[props.name].paths[i]
        focus.push(
          <path
            key={'fpa-' + name}
            d={props.part.paths[name].asPathstring()}
            className={'focus path c' + (i % 4)}
            onClick={() =>
              props.raiseEvent('clearFocus', {
                part: props.name,
                type: 'paths',
                name
              })
            }
          />
        )
      }
      for (let i in props.focus[props.name].coords)
        focus.push(focusCoords(props.focus[props.name].coords[i], i))
    }
  }

  return (
    <g {...getProps(props.part)} id={`part-${props.name}`}>
      {grid}
      {Object.keys(props.part.paths).map((name) => (
        <Path
          key={name}
          name={name}
          part={props.name}
          language={props.language}
          path={props.part.paths[name]}
          focus={props.focus}
          topLeft={props.part.topLeft}
          bottomRight={props.part.bottomRight}
          develop={props.develop}
          raiseEvent={props.raiseEvent}
        />
      ))}
      {Object.keys(props.part.points).map((name) => (
        <Point
          key={name}
          name={name}
          part={props.name}
          language={props.language}
          point={props.part.points[name]}
          focus={props.focus}
          topLeft={props.part.topLeft}
          bottomRight={props.part.bottomRight}
          develop={props.develop}
          raiseEvent={props.raiseEvent}
        />
      ))}
      {Object.keys(props.part.snippets).map((name) => (
        <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
      ))}
      {focus}
    </g>
  )
}

export default Part