import React, { useMemo } from 'react'
import { Layer } from 'react-konva';
import { ControlPts } from './coordinates';
import ZmColumn from './ZmColumn';
// import { StationItem, GateRuntime } from '../../../models/_/defs';
import { apertureMeter } from '../../../utils/utils';

const ZmColumns: React.FC<{
  zmobj: any;
  runtime: any;
  pts: ControlPts;
  selectedId?: string;
  waterRatio: number;
}> = ({ zmobj, runtime, pts, waterRatio }) => {
  const eqpnoList = useMemo(() => new Array(runtime.length).fill(0).map((o, index) => index), [runtime]);
  return (
    <Layer>
      {
        eqpnoList.map((o, index,arr) => (
          <ZmColumn
            key={o}
            gtophgt={apertureMeter(runtime[o]?.realAperture)}
            kdMax={2}
            pts={pts}
            idx={index}
            list={arr}
            waterRatio={waterRatio}
            selected={false}
          />)
        )
      }
    </Layer>
  )
}

export default ZmColumns