import React, { FunctionComponent, useContext, useEffect } from 'react';
import cn from 'classnames';

import { TableContext } from '../context';
import { TableHeadProps } from '../types.d';

export const TableHead: FunctionComponent<TableHeadProps> = ({
  children,
  className = '',
  isNote,
  size,
  style,
}): React.ReactElement => {
  const classNames = cn({
    square_table__cell: true,
    [className]: true,
  });
  const { setColumnSettings } = useContext(TableContext);

  useEffect(() => {
    setColumnSettings((prevState) => {
      let isShowNote = true;
      if (prevState.length === 0) isShowNote = false;
      return [...prevState, { header: children, isNote: isNote ?? isShowNote }];
    });
  }, []);

  return (
    <div className={classNames} style={{ width: size, ...style }}>
      {children}
    </div>
  );
};
