import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { sizes } from '../constants';

function getSize({ size }) {
  if (size) {
    return `
      height: ${sizes[size] || size};
      width: ${sizes[size] || size};
    `;
  }

  return '';
}

export const IconWrapper = styled.span`
  display: inline-block;
  ${getSize};
  color: ${props => props.primaryColor || 'currentColor'};
  fill: ${props => props.secondaryColor || 'white'};
  line-height: 1;

  > svg {
    ${getSize};
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
  }
`;

/**
 * Potok Icon component
 * @version ../package.json
 */
const Icon = ({
  glyph: Glyph,
  size,
  primaryColor,
  secondaryColor,
  dangerouslySetGlyph,
  className,
  onClick,
}) => {
  if (dangerouslySetGlyph) {
    return (
      <IconWrapper
        className={className}
        size={size}
        primaryColor={primaryColor}
        secondaryColor={secondaryColor}
        onClick={onClick}
        dangerouslySetInnerHTML={{
          __html: dangerouslySetGlyph,
        }}
      />
    );
  }

  return (
    <IconWrapper
      className={className}
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      onClick={onClick}
    >
      {Glyph ? <Glyph /> : null}
    </IconWrapper>
  );
};

Icon.defaultProps = {
  primaryColor: '#26bdfc',
  size: 'small',
  onClick: () => {},
};

Icon.propTypes = {
  /** Glyph to render */
  glyph: PropTypes.elementType,
  /** Icons size */
  size: PropTypes.oneOfType(['xsmall', 'small', 'large']),
  /** Icon primary color */
  primaryColor: PropTypes.string,
  /** Second color in 2-color icon */
  secondaryColor: PropTypes.string,
  /** Raw SVG to render (potentially dangerous) */
  dangerouslySetGlyph: PropTypes.string,
  /** Click handler */
  onClick: PropTypes.func,
};

export default Icon;