import React from 'react';
import PropTypes from 'prop-types';
import { routingShape, sessionShape } from 'stores/propTypes';
import { observer, inject } from 'mobx-react';
import queryString from 'query-string';

import { getSocialUrl, socialSettings } from './settings';
import messages from './messages';


@inject('session', 'notifications', 'routing') @observer
class SocialButtonProvider extends React.Component {
  loginUsingSocial = async (token, type) => {
    const { session, notifications, isMobile } = this.props;
    let response;
    try {
      response = await fetch(`/api/rest-auth/${type}/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          access_token: token,
        }),
      });
      if (!response.ok) {
        notifications.addWarning(messages.emailIsDuplicated);
      } else if (isMobile) {
        const { routing: { location } } = this.props;
        const nextUrl = queryString.parse(location.search).next;
        window.location.assign(nextUrl);
      } else {
        session.updateLoginWithTokenView();
      }
    } catch (error) {
      notifications.addWarning(messages.emailIsDuplicated);
    }
    return null;
  };

  encodeQueryData(data) {
    const queryParams = [];
    Object.keys(data).forEach((key) => {
      queryParams.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
    });
    return queryParams.join('&');
  }

  handleSocialModal = (type) => {
    const { social } = this.props;
    const queryParams = socialSettings.get(type).params;
    queryParams.client_id = social.clientId;
    queryParams.scope = social.scope.join(' ');
    const url = getSocialUrl(type, social.version) + this.encodeQueryData(queryParams);

    this.openSocialModal(url, type);
  };

  openSocialModal = (url, type) => {
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    const width = window.innerWidth;
    const height = window.innerHeight;

    const systemZoom = width / window.screen.availWidth;
    const left = Math.abs(width - 500) / 2 / systemZoom + dualScreenLeft;
    const top = Math.abs(height - 500) / 2 / systemZoom + dualScreenTop;

    const externalWindow = window.open(url, type, `width=500, height=500, top=${top}, left=${left}`);

    window.addEventListener('focus', () => externalWindow.close());

    const interval = setInterval(() => {
      const { location } = externalWindow;

      if (externalWindow.closed) {
        clearInterval(interval);
        window.removeEventListener('focus', () => externalWindow.close());
        return;
      }

      try {
        const accessToken = location.href.match(/#(?:access_token)=([\S\s]*?)&/)[1];
        if (accessToken) {
          clearInterval(interval);
          this.loginUsingSocial(accessToken, type);
          externalWindow.close();
        }
        /* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
      } catch (error) {}
    }, 1500);
  };

  render() {
    return (
      <React.Fragment>
        {this.props.children(
          this.handleSocialModal,
        )}
      </React.Fragment>
    );
  }
}

SocialButtonProvider.propTypes = {
  children: PropTypes.func.isRequired,
  social: PropTypes.shape({
    clientId: PropTypes.string,
    version: PropTypes.string,
    scope: PropTypes.array,
  }),
  isMobile: PropTypes.bool,
  routing: routingShape,
  session: sessionShape,
  notifications: PropTypes.shape({
    addWarning: PropTypes.func,
  }),
};

export default SocialButtonProvider;