import React from 'react';
import Checkbox from 'antd/lib/checkbox'

interface GenericFixHeaderProps {
  checkAll?: boolean;
  seat?: "left" | "right";
  colSpan?: number;
  trClick?: (e: React.MouseEvent) => void;
}

interface GenericHeaderProps extends GenericFixHeaderProps {
  fixColumns: any[];
}

// const GenericHeader: React.FC<GenericHeaderProps> = (props) => {
//   return (
//     <div
//       className="lion-table-header"
//     >
//       <WrapperCommonThead style={{ width: this.state.wrapper }}>
//         <colgroup>
//           {
//             this.renderCols(fixColumns)
//           }
//         </colgroup>
//         <thead className="lion-table-header-thead">
//           <tr>
//             {
//               this.renderHeaderTr()
//             }
//           </tr>
//         </thead>
//       </WrapperCommonThead>
//     </div>
//   )
// }

const GenericHeader: React.FC<GenericHeaderProps> = (props) => {

  const { fixColumns, checkAll, seat, trClick } = props;


  const checkEle = seat === "right" ? null : <Checkbox onClick={trClick} checked={checkAll} />

  const headerContainer = fixColumns.map((column: any, index: number) => {
    const align = column.align || undefined;
    const title = column.label || '';

    //  确定是否是被固定的列，是就不显示它
    const fixedClassName = seat && column?.fixed ? ("lion-cell--fix--" + column?.fixed) : (column.hasOwnProperty('fixed') ? ' fix--hidden' : '');
    const thClassName = "thead-th--column " + fixedClassName
    return <th
      key={index}
      className={thClassName}
      style={{
        textAlign: align,
        [column?.fixed]: column?.[column?.fixed + 'Width']
      }}
    >
      <div className="thead-th--cell" style={{
        width: column?.width,
        overflow: column?.name === 'checkbox' ? 'unset !important' : 'hidden'
      }}>
        <span>
          {
            column?.name !== "checkbox" ? title : checkEle
          }
        </span>
      </div>
    </th>
  })
  return <>{headerContainer}</>
}

const GenericFixHeader: React.FC<GenericFixHeaderProps> = (props) => {

  const { checkAll, seat, trClick, colSpan } = props;

  let headerContainer = null;


  if (seat === "left") {
    headerContainer = <>
      <th
        className="thead-th--column"
      >
        <div style={{ textAlign: 'center' }} className="thead-th--cell">
          <Checkbox onClick={trClick} checked={checkAll} />
        </div>
      </th>
      <th
        className="thead-th--column"
        colSpan={colSpan! - 1}
      >

      </th>
    </>
  } else {
    headerContainer = <>
      <th
        className="thead-th--column"
        colSpan={colSpan! - 1}
      >
      </th>
      <th
        className="thead-th--column"
      >
        <div className="thead-th--cell">
          操作
        </div>
      </th>
    </>
  }
  return headerContainer
}

export {
  GenericHeader,
  GenericFixHeader
}