import React, { memo, useMemo } from 'react';
import { RightSubordinateTr } from './rightSubordinateTr';
import { RightPrimaryTr } from './rightPrimaryTr';
import { RightCollapseTr } from './rightCollapseTr';


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

interface RightAreaProps {
  subSchemaApi?: SchemaApi;
  subordinateQuantity?: number;
  colHide?: boolean;
  colSpan: number;
  source: any;
  subordOperate: any;
  primaryOperate: any;
  primaryElevae: number;
  subordinateElevae: number;
  childSource: any;
}


const RightArea: React.FC<RightAreaProps> = memo((
  {
    subSchemaApi,
    subordinateQuantity,
    colHide,
    colSpan,
    source,
    childSource,
    subordOperate,
    primaryOperate,
    subordinateElevae,
    primaryElevae
  }
) => {

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

  return <>
    <RightPrimaryTr
      source={source}
      operations={primaryOperate}
      primaryElevae={primaryElevae}
      colSpan={colSpan}
    />
    {
      subordinateList.map((item, index) => {
        return <RightSubordinateTr
          source={childSource[index]}
          subordinateElevae={subordinateElevae}
          operations={subordOperate}
          key={index}
          colSpan={colSpan}
        />
      })
    }
    {
      (subordinateQuantity! >= 4) ? <RightCollapseTr
        colSpan={colSpan}
      /> : null
    }
  </>
})

export {
  RightArea
}