import { getShapeUtils } from "lib/shape-utils"
import { useSelector } from "state"
import { deepCompareArrays, getPage } from "utils/utils"

export default function Defs() {
  const currentPageShapeIds = useSelector(({ data }) => {
    return Object.values(getPage(data).shapes)
      .sort((a, b) => a.childIndex - b.childIndex)
      .map((shape) => shape.id)
  }, deepCompareArrays)

  return (
    <defs>
      {currentPageShapeIds.map((id) => (
        <Def key={id} id={id} />
      ))}
    </defs>
  )
}

export function Def({ id }: { id: string }) {
  const shape = useSelector(({ data }) => getPage(data).shapes[id])

  return getShapeUtils(shape).render(shape)
}