import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';
import { DatalistCol } from './DatalistCol';

const propTypes = {
  /**
   * You can use simple value like 'left' or 'top'.
   * You can also use combined values like 'top left' or 'left top'.
   * You can also use responsive values like 'top left middle@md center@md'.
   */
  align: PropTypes.oneOfType([
    PropTypes.oneOf(['left', 'center', 'right', 'top', 'middle', 'bottom']),
    PropTypes.string,
  ]),
  children: PropTypes.node,
  className: PropTypes.string,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  /**
   * You can use simple value like '1' or '2'.
   * You can also use responsive values like '1 2@md 3@lg'.
   */
  grow: PropTypes.oneOfType([
    PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8']),
    PropTypes.string,
    PropTypes.number,
  ]),
  /**
   * The name of the icon to display.
   */
  name: PropTypes.string,
  /**
   * You can use simple value like 'primary' or 'secondary'.
   */
  level: PropTypes.oneOf(['none', 'primary', 'secondary']),
  /**
   * You can use simple value like 'sm' or 'lg'.
   * You can also use responsive values like 'xs sm@md md@lg'
   */
  size: PropTypes.oneOfType([
    PropTypes.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
    PropTypes.string,
  ]),
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  align: '',
  children: '',
  className: '',
  defaultClassName: 'sui-o-datalist__col as--icon',
  grow: '',
  name: '',
  level: 'primary',
  size: 'xs',
  tag: 'div',
};

export const DatalistColIcon = ({ name, children, ...props }) => (
  <DatalistCol {...props}>
    { name ? <Icon name={name} /> : children }
  </DatalistCol>
);

DatalistColIcon.propTypes = propTypes;
DatalistColIcon.defaultProps = defaultProps;
