import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

import Column from '@ui/components/column';
import Avatar from '@ui/components/avatar';
import { remcalc } from '@ui/shared/functions';
import Logo from '../../resources/logo.svg';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
import Tooltip, { TooltipButton } from '@ui/components/tooltip';
import { pseudoEl, typography } from '@ui/shared/composers';
import { colors } from '@ui/shared/constants';

const borderSide = props => props.toggled
  ? 'bottom'
  : 'top';

const StyledHeader = styled.header`
  background-color: ${colors.base.white};
  padding: 0 ${remcalc(18)};
`;

const StyledLogo = styled(Logo)`
  padding-top: ${remcalc(12)};
`;

const StyledProfileWrapper = styled.div`
  position: relative;
  padding-top: ${remcalc(6)};
  text-align: right;
`;

const StyledAvatarWrapper = styled.div`
  display: inline-block;

  &:after {
    border-left: ${remcalc(5)} solid transparent;
    border-right: ${remcalc(5)} solid transparent;
    border-${borderSide}: ${remcalc(5)} solid black;

    ${pseudoEl({
      top: '50%',
      right: '0'
    })}
  }
`;

const StyledName = styled.span`
  color: ${colors.base.secondaryDark};
  font-size: ${remcalc(16)};
  height: ${remcalc(66)};
  position: relative;
  top: ${remcalc(-12)};
  margin-right: ${remcalc(6)}
`;

const EmptyButton = styled.button`
  background: none;
  border: none;
  padding-right: ${remcalc(20)};

  ${typography.libreFranklin};
  ${typography.normal};
`;

const StyledAvatar = styled(Avatar)`
  marginLeft: ${remcalc(12)};
`;

const arrowPosition = {
  bottom: '100%',
  right: 18
};

const Header = ({
  account,
  handleToggle,
  tooltip,
  ...props
}) => {
  const handleToggleClick = (ev) => {
    ev.preventDefault();
    handleToggle(!tooltip);
  };

  const handleHideToggle = (ev) => {
    ev.preventDefault();
    handleToggle(false);
  };

  const tooltipComponent = !tooltip ? null : (
    <Tooltip
      arrowPosition={arrowPosition}
      right={0}
      top={39}
    >
      <li>
        <TooltipButton to='/'>My Account</TooltipButton>
      </li>
      <li>
        <TooltipButton to='/'>Settings</TooltipButton>
      </li>
      <li>
        <TooltipButton to='/'>About</TooltipButton>
      </li>
    </Tooltip>
  );

  return (
    <StyledHeader
      name='application-header'
      onBlur={handleHideToggle}
      onFocus={handleHideToggle}
      {...props}
    >
      <Row>
        <Column lg={10} xs={8}>
          <Link to='/'>
            <StyledLogo />
          </Link>
        </Column>
        <Column lg={2} xs={4}>
          <StyledProfileWrapper>
            <StyledAvatarWrapper toggled={tooltip}>
              <EmptyButton onClick={handleToggleClick}>
                <StyledName>
                  {account.name}
                </StyledName>
                <StyledAvatar
                  alt={account.name}
                  name={account.name}
                  src={account.avatar}
                />
              </EmptyButton>
            </StyledAvatarWrapper>
            {tooltipComponent}
          </StyledProfileWrapper>
        </Column>
      </Row>
    </StyledHeader>
  );
};

Header.propTypes = {
  account: PropTypes.account,
  handleToggle: React.PropTypes.func,
  tooltip: React.PropTypes.bool
};

export default Header;

@@ -234,24 +234,27 @@
 functions';%0A
+// 
 import Logo 
@@ -286,16 +286,73 @@
 o.svg';%0A
+import Logo from '../../resources/triton_logo_dark.png';%0A
 import P
@@ -804,14 +804,12 @@
 yled
-(Logo)
+.img
 %60%0A  
@@ -824,33 +824,84 @@
 top: $%7Bremcalc(1
-2
+8)%7D;%0A  width: $%7Bremcalc(87)%7D;%0A  height: $%7Bremcalc(25
 )%7D;%0A%60;%0A%0Aconst St
@@ -2702,16 +2702,27 @@
 yledLogo
+ src=%7BLogo%7D
  /%3E%0A    

Add triton logo