import React, { useMemo } from 'react';
import Checkbox from 'antd/lib/checkbox';
import CommonColgroup from './commonColgroup'
import './index.scss'


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

const CommonFixThead: React.FC<FixHeaderProps> = (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 <thead className="lion-table-header-thead">
    <tr>
      {headerContainer}
    </tr>
  </thead>
}

const CommonFixHeader: React.FC<FixHeaderProps & { wrapper: number, fixColumns: any[] }> = ({
  colSpan,
  seat,
  checkAll,
  trClick,
  wrapper,
  fixColumns
}) => {

  const fixTheadProps = useMemo(() => {
    if (seat === "right") return { colSpan: colSpan, seat: seat }
    return { colSpan: colSpan, trClick: trClick, seat: seat }
  }, [seat, colSpan])

  return <div
    className="lion-table-container-fixed-header">
    <table className="lion-table-common-thead" style={{ width: wrapper }}>
      <CommonColgroup columns={fixColumns} />
      <CommonFixThead checkAll={checkAll} {...fixTheadProps} />
    </table>
  </div>
}

export default CommonFixHeader