import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Cell from './Cell';
import Icon from './Icon';

import '../base';
import styles from './ItemCell.styl';

export default function ItemCell({ children, textAlign = 'left', label, primary, truncated, error, warning, info, success, clickable, nested, margin, style = {}, ...props }) {

  const wrapperClasses = classNames({
    [styles.wrapper]: true,
    [styles.margin]: margin,
    [styles.primary]: primary,
    [styles.truncated]: truncated
  });

  const labelClasses = classNames({
    [styles.label]: true,
    // [styles.primary]: primary,
    [styles.error]: !!error,
    [styles.warning]: !!warning,
    [styles.info]: !!info,
    [styles.success]: !!success
  });

  return (
    <Cell style={{ padding: nested ? 0 : '0 10px', textAlign, ...style }} {...props}>
      {
        // Only show the label when it actually acompanies some content (children).
        // eslint-disable-next-line jsx-a11y/label-has-associated-control
        (label && children) ? <label className={labelClasses}>{label}</label> : null
      }
      <div className={wrapperClasses}>
        {children}
        {
          clickable ? <Icon textSized name="doka-icon-more" info style={{ marginLeft: 5 }} /> : null
        }
      </div>
    </Cell>
  );
}

ItemCell.propTypes = {
  children: PropTypes.node,
  primary: PropTypes.bool,
  truncated: PropTypes.bool,
  label: PropTypes.node,
  margin: PropTypes.bool,
  clickable: PropTypes.bool,
  nested: PropTypes.bool,
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool,
  textAlign: PropTypes.string
};

ItemCell.defaultProps = {
  children: undefined,
  primary: undefined,
  truncated: undefined,
  label: undefined,
  margin: undefined,
  clickable: undefined,
  nested: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined,
  textAlign: undefined
};