import React from 'react';

export interface ICol {
  className?: string;
  id?: string;
  xs?: number | string;
  sm?: number | string;
  md?: number | string;
  lg?: number | string;
  xl?: number | string;
  hide?: string | boolean;
  style?: React.CSSProperties;
  [x: string]: any;
}

export interface IColSize {
  key: string;
  val: any;
}

export function getSizeClasses(sizes: IColSize[]) {
  let classList = '';
  let sizeCount = 0;
  sizes.map((size) => {
    if (!size.val) return;
    sizeCount++;
    if (size.key === 'hide') {
      if (typeof size.val === 'boolean') classList += `b-hide `;
      else classList += `b-hide-${size.val} `;
    } else {
      classList += `b-col-${size.key}-${size.val} `;
    }
  });
  if (sizeCount === 0) {
    classList = `b-col `;
  }
  return classList;
}

export const Col: React.FC<ICol> = (props) => {
  const { children, className = '', id, xs, sm, md, lg, xl, hide, style, ...otherProps } = props;

  let sizeClasses = getSizeClasses([
    {
      key: 'xs',
      val: xs,
    },
    {
      key: 'sm',
      val: sm,
    },
    {
      key: 'md',
      val: md,
    },
    {
      key: 'lg',
      val: lg,
    },
    {
      key: 'xl',
      val: xl,
    },
    {
      key: 'hide',
      val: hide,
    },
  ]);

  return (
    <div id={id} className={`${sizeClasses} ${className}`} style={style} {...otherProps}>
      {children}
    </div>
  );
};