import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import computeJobDescription from '@apolitical/common-helpers-authors';

import {
  apoliticalAssociate,
  communityAssociate,
  memberContactToAssociate,
} from './AssociateTypes';
import Atom from '../../Atom/index';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const { breakpoint, color } = ApoliticalBrand;
const { OptionalAsLink, ProfilePicture } = Atom;

type Props = {
  user: ?Object,
  authorTag: ?string,
  dataGtmEventContext: string,
  dataGtmEventType: string,
  className?: string,
};

const AssociateAnchorReset = styled.div`
  width: 100%;

  a {
    text-decoration: none;
  }
`;

const AssociateContainer = styled.div`
  float: left;
  align-items: center;
  display: flex;
  margin: 0.1rem 0 0;
  justify-content: start;
  flex-direction: row-reverse;

  > div,
  > div > a {
    flex-direction: reverse;
    justify-content: start;
  }
`;

const AssociateText = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const AssociateIcon = styled(ProfilePicture)`
  border-radius: 3rem;
  height: 3.2rem;
  width: 3.2rem;
  object-fit: cover;
  margin-right: 1rem;

  @media ${breakpoint.onlyScreen.ipad} {
    height: 4rem;
    width: 4rem;
  }
`;

const AssociateLink = styled.span`
  background: none;
  border: none;
`;

const AssociateName = styled.p`
  color: ${color.charcoal};
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.6rem;

  &:hover {
    text-decoration: none;
    cursor: ${({ href }) => (href ? 'pointer' : 'auto')};
    color: ${({ href }) => (href ? color.purple : color.charcoal)};
  }

  @media ${breakpoint.onlyScreen.ipad} {
    font-size: 1.6rem;
    line-height: 2rem;
  }
`;

const AssociateRole = styled.p`
  color: ${color.gunmetal};
  font-size: 1.4rem;
  font-weight: normal;
  font-style: italic;
  line-height: 1.6rem;
  margin-top: 0.2rem;
  display: none;

  @media ${breakpoint.onlyScreen.ipad} {
    display: initial;
  }
`;

const Author = ({
  user,
  authorTag,
  dataGtmEventContext,
  dataGtmEventType,
  className,
}: Props) => {
  const [associate, setAssociate] = useState(communityAssociate);

  useEffect(() => {
    if (authorTag === 'Apolitical' || authorTag === 'the-apolitical-community') {
      setAssociate(apoliticalAssociate);
    } else {
      const member = memberContactToAssociate(user);
      if (member) {
        setAssociate(member);
      } else {
        setAssociate(communityAssociate);
      }
    }
  }, [authorTag, user]);

  const {
    name, image, role, url, organisation, country,
  } = associate;

  const displayedJob = computeJobDescription(role, organisation, country);

  return (
    <AssociateAnchorReset className={className}>
      <OptionalAsLink
        href={url}
        dataGtmEventType={dataGtmEventType}
        dataGtmEventContext={dataGtmEventContext}
        className="gtm-trackable"
      >
        <AssociateContainer>
          <AssociateText>
            <AssociateName data-testid="associate-name" href={url}>
              <AssociateLink>{name}</AssociateLink>
            </AssociateName>
            {displayedJob && (
              <AssociateRole data-testid="associate-job-description">
                {displayedJob}
              </AssociateRole>
            )}
          </AssociateText>
          <AssociateIcon
            name={name}
            src={image && image.thumbnail}
            data-testid={`associate-icon-${name}`}
            alt={`${name} profile picture`}
          />
        </AssociateContainer>
      </OptionalAsLink>
    </AssociateAnchorReset>
  );
};

Author.defaultProps = {
  className: '',
};

export default Author;