import { Chevron } from 'shared/components/navigation/primary'
import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
import Point from './point'

const MoveLine = ({ op }) => <Point point={op.to} />
const Curve = ({ op }) =>
  ['cp1', 'cp2', 'to'].map((pnt) => (
    <Li key={pnt}>
      <Details>
        <Summary>
          <SumDiv>
            <Deg />
            <span className="font-bold">{pnt}</span>
          </SumDiv>
          <Chevron />
        </Summary>
        <Point point={op[pnt]} />
      </Details>
    </Li>
  ))

const XrayPathOp = ({ op }) => (
  <Li>
    {op.type === 'close' ? (
      <NoSumDiv>
        <Deg />
        <span className="font-bold">{op.type}</span>
      </NoSumDiv>
    ) : (
      <Details>
        <Summary>
          <SumDiv>
            <Deg />
            <span className="font-bold">{op.type}</span>
            <span>To</span>
          </SumDiv>
          <Chevron />
        </Summary>
        <Ul>{op.type === 'curve' ? <Curve op={op} /> : <MoveLine op={op} />}</Ul>
      </Details>
    )}
  </Li>
)

export const XrayPathOps = ({ ops = false }) => {
  if (!ops || ops.length < 1) return null

  return (
    <Li>
      <Details>
        <Summary>
          <SumDiv>
            <Deg />
            <span className="font-bold">path.ops</span>
          </SumDiv>
          <Chevron />
        </Summary>
        <Ul>
          {ops.map((op) => (
            <XrayPathOp op={op} key={op} />
          ))}
        </Ul>
      </Details>
    </Li>
  )
}