import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../Icon';
import './title.scss';

const propTypes = {
  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
  variant: PropTypes.oneOf(['primary', 'dash-lagoon', 'purple', 'white']),
  strong: PropTypes.bool,
  withoutMargeTop: PropTypes.bool,
  withoutMargeBottom: PropTypes.bool,
  withoutMarge: PropTypes.bool,
  center: PropTypes.bool,
  /** A component, h1, h2, h3, a, react router Link, etc... */
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  children: PropTypes.any,
  icon: PropTypes.string,
  className: PropTypes.string
};

const defaultProps = {
  level: 3,
  variant: 'primary',
  strong: false,
  withoutMargeTop: false,
  withoutMargeBottom: false,
  withoutMarge: false,
  center: false,
  component: null,
  children: null,
  icon: null,
  className: undefined
};

const Title = ({
 icon, component, level, variant, strong,
  withoutMarge, withoutMargeTop, withoutMargeBottom, center,
  children, className, ...props
}) => {
  const resultLevel = Math.min(level, 5) || 5;
  const MyComponent = component || `h${resultLevel}`;
  return (
    <div>
      <MyComponent
        className={className}
        styleName={classNames(
          'base', `level-${resultLevel}`, variant,
          {
            strong,
            withoutMargeTop,
            withoutMargeBottom,
            withoutMarge,
            center
          })
        }
        {...props}
      >
        {icon ? <Icon size="md" name={icon} styleName="icon" /> : null}
        {children}
      </MyComponent>
    </div>
  );
};

Title.propTypes = propTypes;
Title.defaultProps = defaultProps;

export default Title;
