import * as React from 'react';
import * as classNames from 'classnames';
import {ReactNode, SFC, Ref} from 'react';
import {Scrollbars} from './../';
import {range} from './utils/array';

export interface DatagridTableViewProps {
  children?: ReactNode;
  loading?: boolean;
  properties: any[];
  showPlaceholderCells?: boolean;
}

export const DatagridTableView: SFC<DatagridTableViewProps> = (props: DatagridTableViewProps) => {
  const childrenArray = React.Children.toArray(props.children);

  return (
    <div className="grid-tbody">
      <Scrollbars autoReset>
        {!!childrenArray.length && <div className="grid-trs">{props.children}</div>}
        {(!childrenArray.length || childrenArray.length < 20) && renderPlaceholder(props)}
      </Scrollbars>
    </div>
  );
};

DatagridTableView.displayName = 'DatagridTableView';

DatagridTableView.defaultProps = {
  loading: false,
  showPlaceholderCells: false,
};

const renderPlaceholder = (props: DatagridTableViewProps) => {
  const {showPlaceholderCells, properties, loading} = props;
  const dummyArray = range(100);

  return (
    <div className="grid-trs-placeholders">
      {dummyArray.map((item, index) => (
        <div key={index} className="grid-tr">
          {properties.map((property: any, index) => (
            <div
              key={index}
              className={classNames(
                'grid-td grid-td-placeholder',
                {loading},
              )}
              style={property.thStyle}
            />
          ))}
        </div>
      ))}
    </div>
  );
};