import React, { HTMLAttributes } from 'react'
import { useCanvasStore } from '../../state/canvasStore'
import { useKrateStore } from '../../state/krateStore'
import { Krate } from '../krate'

interface WorldLayerProps extends HTMLAttributes<HTMLDivElement> {}

export const WorldLayer: React.FC<WorldLayerProps> = ({ ...props }) => {
  const { camX, camY, zoom, collapsed } = useCanvasStore()
  const { krates } = useKrateStore()

  const style: React.CSSProperties = {
    position: 'absolute',
    width: '12000px',
    height: '8000px',
    transform: `translate(${camX}px, ${camY}px) scale(${zoom})`,
    transformOrigin: '0 0',
  }

  return (
    <div style={style} {...props}>
      {Array.from(krates.values())
        .filter((k: any) => !k.minimized)
        .map((krate: any) => (
          <Krate key={krate.id} krate={krate} collapsed={collapsed} />
        ))}
    </div>
  )
}