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

import {
  CircleFacebookIcon,
  CircleInstagramIcon,
  CircleTwitterIcon,
  CircleLinkedInIcon
} from '@bufferapp/components';

import { facebook, instagram, twitter, linkedin} from '@bufferapp/ui/style/colors';

const SocialIcon = ({ service, socialIconSize, avatarSize, withBorder, inline }) => {
  let icon;
  switch (service) {
    case 'twitter':
      icon = <CircleTwitterIcon color={twitter} size={{ width: '100%', height: '100%' }} />;
      break;
    case 'facebook':
      icon = <CircleFacebookIcon color={facebook} size={{ width: '100%', height: '100%' }} />;
      break;
    case 'instagram':
      icon = <CircleInstagramIcon color={instagram} size={{ width: '100%', height: '100%' }} />;
      break;
    case 'linkedin':
      icon = <CircleLinkedInIcon color={linkedin} size={{ width: '100%', height: '100%' }} />;
      break;
    default:
      icon = null;
      break;
  }

  return (
    <div
      style={{
        background: '#fff',
        position: `${!inline ? 'absolute' : ''}`,
        display: `${inline ? 'inline-block' : ''}`,
        marginRight: `${inline ? '0.25rem' : ''}`,
        width: `${socialIconSize}px`,
        height: `${socialIconSize}px`,
        top: `${avatarSize - socialIconSize}px`,
        left: `${avatarSize - (socialIconSize - 1)}px`,
        borderRadius: '50%',
        border: `rgba(255, 255, 255, 0.5) ${withBorder ? '1px' : '0'} solid`,
      }}
    >
      {icon}
    </div>
  );
};

SocialIcon.propTypes = {
  service: PropTypes.oneOf(['twitter', 'facebook', 'instagram', 'linkedin']).isRequired,
  socialIconSize: PropTypes.number.isRequired,
  avatarSize: PropTypes.number,
  withBorder: PropTypes.bool,
  inline: PropTypes.bool,
};

SocialIcon.defaultProps = {
  avatarSize: 0,
  withBorder: false,
  inline: false,
};

export default SocialIcon;