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

const CommonThead: React.FC<{
  columns: any[]
}> = ({
  columns
}) => {
    const headerContainer = useMemo(() => {
      return columns.map((column: any, index: number) => {
        const align = column.align || undefined;
        const title = column.label || '';

        return <th
          key={index}
          className="thead-th--column"
          style={{
            textAlign: align
          }}
        >
          <div className="thead-th--cell" style={{
            width: column?.width,
            overflow: column?.name === 'checkbox' ? 'unset !important' : 'hidden'
          }}>
            <span>
              {
                ["checkbox", "operation"].includes(column?.name) ? null : title
              }
            </span>
          </div>
        </th>
      })
    }, [columns])
    return (
      <thead className="lion-table-header-thead">
        <tr>{headerContainer}</tr>
      </thead>
    )
  }

const CommonHeader: React.FC<{
  fixColumns: any[],
  wrapper: number
}> = ({
  fixColumns,
  wrapper
}) => {
    return <div className="lion-table-header">
      <table className="lion-table-common-thead" style={{ width: wrapper }}>
        <CommonColgroup columns={fixColumns} />
        <CommonThead columns={fixColumns} />
      </table>
    </div>
  }

export default CommonHeader