import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import MicroButton from 'Components/buttons/microButton';
import Link from 'Components/link/link';
import { textSize } from 'Themes/utils/fontPickers';
import { grayColor } from 'Themes/utils/colorPickers';

const AngentStyled = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid ${grayColor[0.4]};
  padding-top: 16px;
`;

const AgentPicture = styled.img`
  width: 66px;
  height: 66px;
`;

const Name = styled.span`
  font-size: ${textSize('M')};
  font-weight: bold;
`;

const Description = styled.span`
  font-size: ${textSize('S')};
`;

const Phone = styled(Link)`
  font-size: ${textSize('S')};
`;

const Actions = styled.div`
  padding: 16px 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
`;

const AgentInfo = ({ picture, name, subtitle, phone, email }) => {
  const onPhoneClick = useCallback(
    () => (window.location.href = `tel:${phone}`),
    [phone],
  );

  const onChatClick = useCallback(() => {}, []);

  const onEmailClick = useCallback(() => window.open(`mailto:${email}`), [
    email,
  ]);

  return (
    <AngentStyled>
      <AgentPicture src={picture} />
      <Name>{name}</Name>
      <Description>{subtitle}</Description>
      <Phone href={phone}>{phone}</Phone>
      <Actions>
        <MicroButton icon="phone" label="CALL" onClick={onPhoneClick} />
        <MicroButton icon="chat" label="CHAT" onClick={onChatClick} />
        <MicroButton icon="email" label="EMAIL" onClick={onEmailClick} />
      </Actions>
    </AngentStyled>
  );
};

AgentInfo.propTypes = {
  picture: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  phone: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

AgentInfo.displayName = 'AgentInfo';

export default AgentInfo;
