import React from 'react';
import styled  from 'styled-components';
import throttle from 'lodash/throttle';
import EVENTS from 'api/constants/events';
import editIcon from 'ui/assets/images/edit@2x.png';
import spinIcon from 'ui/assets/images/spin.svg';
import menuIcon from 'ui/assets/images/menu.png';

const Container = styled.div`
  display: flex;
  position: fixed;
  font-family: Arial, sans-serif;
  font-size: 12px;
  bottom: 0;
  left: 0;
`;

const LastRequestContainer = styled.div`
  font-family: Arial, sans-serif;
  font-size: 12px;
  opacity: ${(props) => Number(!props.fadingOut)};
  transition: opacity ${(props) => props.fadingOut ? 2 : 0.1}s ease-in-out;
`;

const Control = styled.div`
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  padding: 0 8px;
  height: 20px;
  border-right: 1px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
  cursor: pointer;
  ${(props) => props.rounded ? 'border-radius: 0 0 0 11px' : ''}
  
  &:hover {
    background-color: #c8dcf4;
  }
`;

const Method = styled.div`
  font-weight: bold;
  margin-right: 10px;
`;

const URL = styled.div`
  margin-right: 20px;
`;

const Status = styled.div`
  color: inherit;
`;

const Icon = styled.img`
  height: 16px;
  user-select: none;
`;

class LatestRequestNotifications extends React.Component {
  constructor() {
    super();

    this.state = {
      latestRequest: null,
      fadingOut: true
    };

    this.lastX = 0;
    this.lastY = 0;
    this.canFadeOut = true;

    this.setLatestRequest         = this.setLatestRequest.bind(this);
    this.resetFadeoutTimer        = this.resetFadeoutTimer.bind(this);
    this.stopFadeoutTimer         = this.stopFadeoutTimer.bind(this);
    this.resetFadeoutTimerByMouse = throttle(this.resetFadeoutTimerByMouse.bind(this), 30);
  }

  componentDidMount() {
    this.props.API.on(EVENTS.REQUEST_CAPTURED, this.setLatestRequest);
    this.props.API.on(EVENTS.RESPONSE_RECEIVED, this.setLatestRequest);

    document.addEventListener('mousemove', this.resetFadeoutTimerByMouse);
  }

  componentWillReceiveProps() {
    this.resetFadeoutTimer();
  }

  componentWillUnmount() {
    this.props.API.off(EVENTS.REQUEST_CAPTURED, this.setLatestRequest);
    this.props.API.off(EVENTS.RESPONSE_RECEIVED, this.setLatestRequest);

    document.removeEventListener('mousemove', this.resetFadeoutTimerByMouse);
    this.stopFadeoutTimer(true);
  }

  resetFadeoutTimer() {
    clearTimeout(this.willFadeOut);
    clearTimeout(this.willDisappear);

    this.canFadeOut = true;

    this.setState({ fadingOut: false }, () => {
      this.willFadeOut = setTimeout(() => this.setState({ fadingOut: true }, () => {
        this.willDisappear = setTimeout(() => this.setState({ latestRequest: null }), 2000);
      }), 3000);
    });
  }

  stopFadeoutTimer(unmounting) {
    clearTimeout(this.willFadeOut);
    clearTimeout(this.willDisappear);
    
    this.canFadeOut = false;

    if (!unmounting) {
      this.setState({ fadingOut: false });
    }
  }

  resetFadeoutTimerByMouse(event) {
    if (!this.canFadeOut || !this.state.latestRequest) {
      return;
    }

    const halfHeight = Math.round(window.innerHeight / 2);
    const halfWidth  = Math.round(window.innerWidth - window.innerWidth / 2);

    const deltaX = event.clientX - this.lastX;
    const deltaY = event.clientY - this.lastY;

    const inBottomLeftCorner = event.clientX < halfHeight && event.clientY > halfWidth;
    const movingToCorner     = deltaX <= 0 && deltaY >= 0;

    if (inBottomLeftCorner && movingToCorner) {
      this.resetFadeoutTimer();
    }

    this.lastX = event.clientX;
    this.lastY = event.clientY;
  }

  setLatestRequest({ requestId }) {
    this.setState({ latestRequest: this.props.API.getCapturedRequest(requestId) });
  }

  renderLatestRequest() {
    if (!this.state.latestRequest) {
      return null;
    }

    return (
      <LastRequestContainer
      fadingOut={ this.state.fadingOut }
      onMouseEnter={ this.stopFadeoutTimer }
      onMouseLeave={ this.resetFadeoutTimer }>
      <Control onClick={ () => this.props.onEdit(this.state.latestRequest.id) }>
        <Method>{ this.state.latestRequest.method }</Method>
        <URL>{ this.state.latestRequest.url }</URL>

        {
          this.state.latestRequest.response &&
          <Status>{ this.state.latestRequest.response.status }</Status>
        }

        {
          !this.state.latestRequest.response &&
          <Icon src={ spinIcon } alt="Pending Request"/>
        }

        <Icon src={ editIcon } alt="Mock Response"/>
      </Control>
    </LastRequestContainer>
    );
  }

  render() {
    return (
      <Container fadingOut={ this.state.fadingOut }
                 onMouseEnter={ this.stopFadeoutTimer }
                 onMouseLeave={ this.resetFadeoutTimer }>
        <Control rounded onClick={ this.props.showLogs }>
          Logs
        </Control>
        <Control onClick={ this.props.showMocks }>
          Mocks
        </Control>

        { this.renderLatestRequest() }
      </Container>
    );
  }
}

export default LatestRequestNotifications;

@@ -4113,24 +4113,77 @@
 uest.id) %7D%3E%0A
+        %3CIcon src=%7B editIcon %7D alt=%22Mock Response%22/%3E%0A
         %3CMet
@@ -4552,62 +4552,8 @@
    %7D
-%0A%0A        %3CIcon src=%7B editIcon %7D alt=%22Mock Response%22/%3E
 %0A   

move edit icon for request to the correct place