import React, { useState } from 'react';

interface CellProperty {
  label?: string;
  name?: string;
  type?: string;
  group?: Array<CellProperty>;
  hiddenOn?: string;
  [propName: string]: any;
}

interface GenericColumnProps {
  align?: string;
  fixed?: 'left' | 'right';
  render?: (column: GenericColumnProps, record: any, index: number) => JSX.Element | null;
  buttons?: CellProperty[];
  group?: GenericColumnProps[];
  name?: string;
  type?: string;
  label?: string;
  index?: number;
  width?: number;
}

interface ColumnProps {
  width?: number;
  index?: number;
}

// const useRenderContainer = (
//   render?: (column: GenericColumnProps, record: any, index: number) => JSX.Element | null,
//   fixed?:'left' | 'right',
//   buttons?: CellProperty[],
//   group?: GenericColumnProps[],
//   type?: string,

// ) => {
//   const [schema, setSchema] = useState(undefined);

//   useEffect(()=>{

//   },[])

// }

const ColumnCotainer: React.FC<ColumnProps> = ({ width, index }) => {

  return (
    <td
      key={index}

    >
      <div style={{ width: width ? width : 50, fontSize: '12px' }} className='tbody-td--column--cell'>
        <span>

        </span>
      </div>
    </td>

  )
}



const GenericColumn: React.FC<GenericColumnProps> = (props) => {
  /*
      渲染优先级
      1. column.render：根据自定义的render方法来渲染出value
      2. column.buttons：根据列按钮来渲染
      3. column.group：根据列分组来渲染
      4. column：根据存在的name字段来渲染
    */

  const { render, buttons, group, name, index } = props;

  let value = undefined;

  if (render)

    return (
      <ColumnCotainer>

      </ColumnCotainer>
    )

  return null
}