import React, { useState } from 'react';
import { PopUp } from 'app/shared/components/popUp/popUp';
import { Thumbnail } from 'app/shared/components/thumbnail/thumbnail';
import * as Text from 'app/shared/components/text/text';
import { Contact } from '../../store/contact.types';

export interface Props {
  contact: Contact
}

const ContactPanel = ({ contact }: Props) => {

  const [ isPopupVisible, setIsPopupVisible ] = useState(false);

  if (!contact) {
    return null;
  }

  return (
    <div className='o-layout o-layout--vertical u-full-height u-bg-color--background-alternative'>
      <div className='o-layout__item u-full-height'>
        <div className='c-contact-panel u-full-height'>
          <div className='o-layout o-layout--vertical u-full-height'>
            <div className='o-layout__item'>
              <div className='o-gutter--big'>
                <Thumbnail src={contact.thumbnail} size='size-enormous'/>
                <div className='u-margin-top--medium'>
                  <Text.Headline size='h4' extraClass='u-margin-bottom--none'>{contact.name}</Text.Headline>
                </div>
                <div className='u-margin-top--tiny u-margin-bottom--small'>
                  <Text.Caption extraClass='u-uppercase u-color--dark-grey u-margin-bottom--none'>{contact.position}</Text.Caption>
                </div>
                <div className='o-layout o-layout--horizontal o-layout--justified o-layout--aligned'>
                  <i className='icon-phone u-margin-right--small u-font-weight--bold'/>
                  <Text.Paragraph size='small' extraClass='u-uppercase u-margin-bottom--none'>{contact.phone}</Text.Paragraph>
                </div>
              </div>
            </div>
            <div className='c-contact-panel__email-box o-layout__item-auto'>
              <div className='o-gutter u-position--relative u-font-size--caption'>
                <PopUp active={isPopupVisible} position={[ 'above', 'horizontal-center' ]}>
                  <p className='o-gutter--small u-margin--none'>{contact.email}</p>
                </PopUp>
                <a href={`mailto:${contact.email}`} className={'js-hit-area'}
                  onMouseOver={() => setIsPopupVisible(true)}
                  onMouseOut={() => setIsPopupVisible(false)}>
                  <div className='o-layout o-layout--align-end o-layout--justified'>
                    <i className='icon-mail'/>
                    <div className='u-margin-left--small'>
                      <span>Email</span>  
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactPanel;