import React, { useMemo, memo } from 'react';
import {
  LeftSubordinateTr
} from './leftSubordinateTr';

import {
  LeftPrimaryTr
} from './leftPrimaryTr';

import {
  LeftCollapseTr
} from './leftCollapseTr';
import { SchemaApi } from '../../../../../../..';

interface LeftAreaProps {
  subSchemaApi?: SchemaApi;
  subordinateQuantity?: number;
  colHide?: boolean;
  colSpan?: number;
  checked: boolean;
  primaryElevae: number;
  subordinateElevae: number;
  trClick: any;
  primaryKey: any;
}


const LeftArea: React.FC<LeftAreaProps> = memo(({ primaryKey, primaryElevae, subordinateElevae, subSchemaApi, subordinateQuantity, colHide, checked, trClick }) => {

  const subordinateList = useMemo(() => {
    if (colHide) return Array.from({ length: subordinateQuantity ?? 0 })
    return Array.from({ length: subordinateQuantity ?? 0 }).slice(0, 4)
  }, [colHide, subordinateQuantity])

  return <>
    <LeftPrimaryTr
      primaryElevae={primaryElevae}
      checked={checked}
      primaryKey={primaryKey}
      trClick={trClick}
    />
    {
      subordinateList.map((item, index) => {
        return <LeftSubordinateTr
          subordinateElevae={subordinateElevae}
          key={index}
        />
      })
    }
    {
      (subordinateQuantity! >= 4) ? <LeftCollapseTr /> : null
    }
  </>
})

export {
  LeftArea
}