import React, { useContext, memo, useCallback } from 'react';
import { LionTestTableContext } from '../../../testTable';

interface CollapseTrProps {
  colSpan: number;
  trClick: (primaryField: string) => void;
  source: any;
  subordinateQuantity?: number;
  colHide: boolean;
}

const CollapseTr: React.FC<CollapseTrProps> = memo((props) => {

  const { colSpan, trClick, source, subordinateQuantity, colHide } = props;

  const { subSchemaApi, render, subTableTitle, primaryField } = useContext(LionTestTableContext);

  const handleOpenCol = useCallback((primaryField: string) => {
    trClick(primaryField)
  }, [source])

  let collapseEle = null;

  let collapseContainer = subSchemaApi ? render!('点击查看全部数据', {
    "actionType": "dialog",
    "type": "action",
    "level": "primary",
    "name": "click_cat_all_data",
    "className": "hide--cell--operation hide--cell--action",
    "label": "点击查看全部数据",
    "close": false,
    "dialog": {
      "title": subTableTitle,
      "type": "dialog",
      "body": {
        "schemaApi": subSchemaApi,
        "data": source,
        "type": "service"
      },
      "size": "lg",
      "bodyClassName": "overflow-y-auto max-h-nestSide-dialog",
      "className": "h-full",
      "actions": []
    }
  }) : (!colHide ? '共计' + subordinateQuantity! + '条数据，展开查看全部>>' : '点击收起')
  collapseEle = <div className="td--column--hide--cell">
    <div className="td--column--hide--cell--container">
      <div>
        <span
          className="hide--cell--operation"
          onClick={() => { handleOpenCol(source[primaryField!]) }}
        >
          {collapseContainer}
        </span>
      </div>
    </div>
  </div>

  return (
    <tr
      className="tbody-tr--column--common lion-tr--column--hide"
    >
      <td className="tbody-td--column tbody-td--column--hide--checkbox" />
      <td
        className="tbody-td--column--hide"
        style={{ padding: '0px !important' }}
        colSpan={colSpan}
      >
        {collapseEle}
      </td>
      <td className="tbody-td--column thead-th--column" style={{ backgroundColor: 'inherit' }} />
    </tr>
  )
})

export {
  CollapseTr
}