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

import styled from 'styled-components';
import * as icons from '@bufferapp/ui/Icon';
import WarningIcon from '@bufferapp/ui/Icon/Icons/Warning';
import {
  red,
  white,
  facebook,
  instagram,
  twitter,
  pinterest,
  linkedin,
  tiktok,
  googlebusiness,
} from '@bufferapp/ui/style/colors';

const knownSources = [
  'Buffer',
  'Facebook',
  'Google',
  'Instagram',
  'LinkedIn',
  'Pinterest',
  'Shopify',
  'Twitter',
  'Youtube',
  'Tiktok',
];

function getSource(source) {
  let match = null;
  knownSources.forEach((key) => {
    if (source.toLowerCase().match(key.toLowerCase())) {
      match = key;
    }

    if (source === 'googlebusiness') {
      match = 'Gbp';
    }
  });

  return match || 'Website';
}

function getBackgroundColor (source) {
  switch (getSource(source)) {
    case 'Google':
      return '#1DA463';
    case 'Facebook':
      return facebook;
    case 'Pinterest':
      return pinterest;
    case 'Twitter':
      return twitter;
    case 'Instagram':
      return instagram;
    case 'LinkedIn':
      return linkedin;
    case 'Tiktok':
      return tiktok;
    case 'Gbp':
      return googlebusiness;
    default:
      return '#636363';
  }
}

const SIZES = {
  small: {
    icon: '10px',
    inactive: '8px',
    margin: '8px',
    placeholder: '16px',
  },
  medium: {
    icon: '10px',
    inactive: '10px',
    margin: '10px',
    placeholder: '20px',
  },
  extraLarge: {
    icon: '32px',
    inactive: '32px',
    margin: '16px',
    placeholder: '56px',
  },
};

const Wrapper = styled.div`
  position: relative;
  display: flex;
  margin-right: ${props => (props.inactive ? `calc(${SIZES[props.size].margin} / 4)` : '0px')};
`;

const InactiveFlag = styled.div`
  background: ${white};
  border-radius: 50%;
  position: absolute;
  left: calc(
    ${props => (props.inline ? null : `${SIZES[props.size].margin} +`)}
    ${props => SIZES[props.size].placeholder}
    - calc(${props => SIZES[props.size].inactive} / 2)
  );
  top: calc(
    calc(${props => SIZES[props.size].placeholder} / 2)
    - calc(${props => SIZES[props.size].inactive} / 2)
  );
  z-index: 1;

  height: ${props => SIZES[props.size].inactive};
  width: ${props => SIZES[props.size].inactive};

  svg {
    width: ${props => SIZES[props.size].inactive};
    height: ${props => SIZES[props.size].inactive};
    position: absolute;
  }
`;

const PlaceholderIcon = styled.div`
  width: ${props => SIZES[props.size].placeholder};
  height: ${props => SIZES[props.size].placeholder};
  background: ${props => props.color};
  border-radius: ${props => (props.circular ? '50%' : '4px')};
  margin: 0 ${props => (props.inline ? '4px' : SIZES[props.size].margin)} 0 ${props => (props.inline ? 0 : SIZES[props.size].margin)};
  opacity: ${props => (props.inactive ? '60%' : '100%')};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    fill: white;
    width: ${props => SIZES[props.size].icon};
    height: ${props => SIZES[props.size].icon};
  }

  &:hover {
    opacity: 100%;
  }
`;

const ReferralIcon = ({ item, size, circular, inactive, inline }) => {
  const Icon = icons[getSource(item.source)];
  return (
    <Wrapper size={size} inactive={inactive} >
      {inactive && (
        <InactiveFlag size={size} inline={inline} >
          <WarningIcon color={red} />
        </InactiveFlag>
      )}
      <PlaceholderIcon
        inactive={inactive}
        inline={inline}
        circular={circular}
        size={size}
        color={getBackgroundColor(item.source)}
      >
        <Icon size="extraLarge" />
      </PlaceholderIcon>
    </Wrapper>
  );
};

ReferralIcon.propTypes = {
  item: PropTypes.shape({
    source: PropTypes.string,
  }).isRequired,
  size: PropTypes.string,
  circular: PropTypes.bool,
  inactive: PropTypes.bool,
  inline: PropTypes.bool,
};

ReferralIcon.defaultProps = {
  size: 'extraLarge',
  circular: false,
  inactive: false,
  inline: false,
};

export default ReferralIcon;