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

interface GenericCollapse {
  seat?: "left" | "right";
  colLen?: number;
  trClick: (primaryField: string) => void;
  source?: any;
  childListLen?: number;
  colHideList?: any[];
  colHide: boolean;
}

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

  const { seat, colLen, trClick, source, childListLen, colHide } = props;

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

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

  if (!subSchemaApi && childListLen! <= 4) return null

  let collapseEle = null;

  if (!seat) {
    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": []
      }
    }) : (childListLen! > 4 ? (!colHide ? '共计' + childListLen! + '条数据，展开查看全部>>' : '点击收起') : null)
    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>
  }

  // const tdcheckboxClassName = "tbody-td--column tbody-td--column--hide tbody-td--column--hide--checkbox" + (seat === "left" ? (" lion-cell--fix--" + seat) : "");
  // const tdOperationClassName = "tbody-td--column thead-th--column" + (seat === "right" ? (" lion-cell--fix--" + seat) : "");
  return (
    <tr
      className="tbody-tr--column--common lion-tr--column--hide"
    >
      {/* <td className={tdcheckboxClassName} /> */}
      <td className="tbody-td--column tbody-td--column--hide--checkbox" />
      <td
        className="tbody-td--column--hide"
        style={{ padding: '0px !important' }}
        colSpan={colLen}
      >
        {collapseEle}
      </td>
      <td className="tbody-td--column thead-th--column" style={{ backgroundColor: 'inherit' }} />
    </tr>
  )
})

export {
  GenericCollapse
}