import React, { useContext, useMemo } from 'react';
import { LionTestTableContext } from '../../testTable';
import Checkbox from 'antd/lib/checkbox/index';

import {
  GenericCheckBoxContainer,
  GenericOperationContainer,
  GenericSubordinateAreaContainer
} from '../generic/index'


interface GenericSubordinateProps {
  fixColumns: any[];
  SonList?: any[];
  source?: any;
  seat?: "left" | "right";
  trClick?: () => void;
  checkbox?: boolean;
  subordinateElevae: number;
  subordinateQuantity: number;
  colHide: boolean;
}

const GenericSubordinate: React.FC<any> = (props) => {
  const { checkbox, operations, trClick, list_columns, primaryField, selectList, fixColumns, source, seat, surfaceItemWidth } = props;

  // const checkboxEle = seat === "left" ? <Checkbox onClick={(e) => { }} /> : null;

  return <>
    {/* <GenericCheckBoxContainer
      checkbox={checkbox}
      seat={seat}
    >{null}
    </GenericCheckBoxContainer> */}
    <td className="tbody-td--column">
    </td>
    <GenericSubordinateAreaContainer
      source={source}
      seat={seat}
      columns={fixColumns}
    />
    <td className="tbody-td--column thead-th--column tbody-td--opreation">
    </td>
    {/* <GenericOperationContainer
      source={source}
      buttons={operations?.buttons}
      seat={seat}
      limitNum={operations?.num}
    /> */}
  </>

}

const GenericSubordinateTr: React.FC<GenericSubordinateProps> = ({ colHide, subordinateQuantity, subordinateElevae, seat, checkbox, fixColumns, SonList, source, trClick }) => {
  const { primaryField } = useContext(LionTestTableContext);

  const operations = fixColumns[fixColumns?.length - 1];
  const subordinateList = useMemo(() => {
    if (colHide) return SonList![source?.id]
    return SonList![source?.id].slice(0, 4)
  }, [colHide])
  return subordinateList.map((item: any, trIndex: number) => {
    return (
      <tr
        className="tbody-tr--column--common tbody-tr--column--white"
        key={trIndex}
        style={{
          height: subordinateElevae
        }}
        onMouseOut={() => { }}
      // onMouseOver={trClick}
      >
        <GenericSubordinate
          checkbox={checkbox}
          seat={seat}
          source={item}
          fixColumns={fixColumns}
          buttons={operations?.buttons}

        />
      </tr>
    )
  })
}

export {
  GenericSubordinateTr
}