import Path from '../path'
import Point from '../point'
import Snippet from '../snippet'
import { getProps } from '../utils'

const XrayPart = props => {
  // Don't bother if this is the only part on display
  if (props.gist.only && props.gist.only.length === 1) return null
  const i = Object.keys(props.gist.xray?.reveal).indexOf(props.partName)%10
  const { topLeft, bottomRight } = props.part

  return (
    <g>
      <path d={`
        M ${topLeft.x} ${topLeft.y}
        L ${topLeft.x} ${bottomRight.y}
        L ${bottomRight.x} ${bottomRight.y}
        L ${bottomRight.x} ${topLeft.y}
        z`} className={`fill-color-${i} opacity-10`} />
    </g>
  )
}

const Part = props => {
  const { partName, part, app, gist, updateGist } = props

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

  return (
    <g {...getProps(part)} id={`part-${partName}`}>
      {grid}
      {props.gist?.xray?.reveal?.[partName] && <XrayPart {...props} />}
      {Object.keys(part.paths).map((pathName) => (
        <Path
          key={name}
          pathName={pathName}
          path={part.paths[pathName]}
          topLeft={props.part.topLeft}
          bottomRight={props.part.bottomRight}
          {...props}
        />
      ))}
      {Object.keys(props.part.points).map((name) => (
        <Point
          key={name}
          pointName={name}
          point={props.part.points[name]}
          topLeft={props.part.topLeft}
          bottomRight={props.part.bottomRight}
          {...props}
        />
      ))}
      {Object.keys(props.part.snippets).map((snippetName) => (
        <Snippet
          key={name}
          snippetName={snippetName}
          snippet={props.part.snippets[snippetName]}
          {...props}
        />
      ))}
      {focus}
    </g>
  )
}

export default Part