import React, { ReactElement, ReactNode } from 'react';
import css from '../../../utils/css';

import { CommonProps } from '../../common';
import StyledCol from './StyledCol';
import assert from '../../../utils/assert';

type ColPos =
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | 13
  | 14
  | 15
  | 16
  | 17
  | 18
  | 19
  | 20
  | 21
  | 22
  | 23;
type ColSpan = ColPos | 24;

export interface ColProps extends CommonProps {
  /**
   * Col's children node.
   */
  children?: ReactNode;
  /**
   * The number of cells to offset Col from the left, acceptable value is integer from 0 to 23.
   */
  offset?: [ColPos, ColPos, ColPos, ColPos, ColPos];
  /**
   * The number of cells to occupy, acceptable value is integer from 0 to 24, 0 corresponds to display: none.
   */
  span?: [ColSpan, ColSpan, ColSpan, ColSpan, ColSpan];
}

const Col = ({
  offset = [0, 0, 0, 0, 0],
  span = [24, 24, 24, 24, 24],
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
  children,
}: ColProps): ReactElement => {
  assert(
    span?.length === 5,
    `[Grid.Col] Span:${span} is not an array with 5 elements`
  );
  assert(
    offset?.length === 5,
    `[Grid.Col] Offset:${offset} is not an array with 5 elements`
  );

  return (
    <StyledCol
      offset={offset}
      span={span}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {children}
    </StyledCol>
  );
};

export default Col;