import React from 'react';
import { number, string, bool, func, node, oneOfType } from 'prop-types';
import styled from 'styled-components';
import {
  media,
  REM_UNIT_XSM,
  REM_UNIT_SM,
  REM_UNIT_MD,
  REM_UNIT_LG,
  LIGHT_SEA_GREEN,
  GRAY_X11,
  CHARLESTON__GREEN,
} from '@vincent_za/styles';
import { Row } from '../component';

export const CN_CELL = 'cell';
export const CN_CELL_CONTENT = 'cell-content';

const CellStyled = styled.td`
  display: ${props => props.isHidden ? 'none' : 'table-cell'};
  padding: ${props => props.isMinimal ? (`${REM_UNIT_XSM} ${REM_UNIT_SM}`) : (`${REM_UNIT_MD} ${REM_UNIT_SM}`)};
  white-space: ${props => props.isWrap ? 'normal' : 'nowrap'};
  ${props => props.width && `width: ${props.width}rem`};
  ${props => props.width && props.isPercentageWidth && `width: ${props.width}%`};
  ${props => props.isCenter && 'text-align: center'};

  &:first-child {
    padding-left: ${REM_UNIT_LG};
  };

  &:last-child {
    padding-right: ${REM_UNIT_LG};
  };

  ${props => props.isSorted && `
    background-color: ${CHARLESTON__GREEN};
    box-shadow: inset 0px 2px 0 0 ${LIGHT_SEA_GREEN};
    color: ${GRAY_X11};
  `};
  
  ${props => props.isSorted && props.asc && `
    box-shadow: inset 0px -2px 0 0 ${LIGHT_SEA_GREEN};
  `};
  
  ${props => props.isHeader && `
    white-space: nowrap;

    ${props.isSortable && `
      cursor: pointer;

      &:hover {
        background-color: ${CHARLESTON__GREEN};
        color: ${GRAY_X11};
      };
    `};
  `};

  ${props => !props.isHeader && Row}:last-child & {
    padding-bottom: 0;
  };

  ${props => props.isResponsive && `
    padding: ${REM_UNIT_XSM} ${REM_UNIT_LG};
  `};

  ${media.sm`
    padding: ${props => props.isMinimal ? (`${REM_UNIT_XSM} ${REM_UNIT_SM}`) : REM_UNIT_MD};
  `};
`;

const CellContent = styled.div`
  display: flex;
  ${props => props.isCenterVertical && 'align-items: center'};
  ${props => props.isRight && 'justify-content: flex-end'};
`;

class Cell extends React.PureComponent {
  render() {
    const {
      isMinimal,
      title,
      isHidden,
      isHeader,
      isSorted,
      isSortable,
      isWrap,
      isCenter,
      isRight,
      isPercentageWidth,
      isCenterVertical,
      width,
      asc,
      isResponsive,
      className,
      onClick,
      children,
    } = this.props;
    const titleExists = title !== undefined;

    return (
      <CellStyled
        isMinimal={isMinimal}
        isHidden={isHidden}
        isHeader={isHeader}
        isSorted={isSorted}
        isSortable={isSortable}
        asc={asc}
        isWrap={isWrap}
        isCenter={isCenter}
        isPercentageWidth={isPercentageWidth}
        width={width}
        isResponsive={isResponsive}
        className={`${className} ${CN_CELL}`}
        onClick={() => onClick(titleExists ? title : children)}
        key={titleExists ? title : children}
      >
        <CellContent
          isHeader={isHeader}
          isCenterVertical={isCenterVertical}
          isRight={isRight}
          className={CN_CELL_CONTENT}
        >
          {titleExists ? title : children}
        </CellContent>
      </CellStyled>
    );
  }
}

Cell.propTypes = {
  isMinimal: bool,
  title: oneOfType([string, number]),
  isHidden: bool,
  isHeader: bool,
  isSorted: bool,
  isSortable: bool,
  isWrap: bool,
  isCenter: bool,
  isRight: bool,
  isPercentageWidth: bool,
  isCenterVertical: bool,
  asc: bool,
  isResponsive: bool,
  width: number,
  className: string,
  onClick: func,
  children: node,
};

Cell.defaultProps = {
  isMinimal: false,
  title: undefined,
  isHidden: false,
  isHeader: false,
  isSorted: false,
  isSortable: false,
  isWrap: false,
  isCenter: false,
  isRight: false,
  isPercentageWidth: false,
  isCenterVertical: false,
  asc: false,
  isResponsive: false,
  width: undefined,
  className: '',
  onClick() {},
  children: '',
};

export default Cell;
