import { H1 } from '@meetfranz/ui';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { defineMessages, intlShape } from 'react-intl';
import injectSheet from 'react-jss';
import { state as ModalState } from './store';
import { sendAuthRequest } from '../../api/utils/auth';
import Button from '../../components/ui/Button';
import Input from '../../components/ui/Input';
import Modal from '../../components/ui/Modal';
import { DEBUG_API } from '../../config';
import AppStore from '../../stores/AppStore';
import ServicesStore from '../../stores/ServicesStore';

const debug = require('debug')('Ferdi:feature:publishDebugInfo');

const messages = defineMessages({
  title: {
    id: 'feature.publishDebugInfo.title',
    defaultMessage: '!!!Publish debug information',
  },
  info: {
    id: 'feature.publishDebugInfo.info',
    defaultMessage: '!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger\'s privacy policy and terms of service',
  },
  error: {
    id: 'feature.publishDebugInfo.error',
    defaultMessage: '!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
  },
  privacy: {
    id: 'feature.publishDebugInfo.privacy',
    defaultMessage: '!!!Privacy policy',
  },
  terms: {
    id: 'feature.publishDebugInfo.terms',
    defaultMessage: '!!!Terms of service',
  },
  publish: {
    id: 'feature.publishDebugInfo.publish',
    defaultMessage: '!!!Accept and publish',
  },
  published: {
    id: 'feature.publishDebugInfo.published',
    defaultMessage: '!!!Your debug log was published and is now availible at',
  },
});

const styles = theme => ({
  container: {
    minWidth: '70vw',
  },
  info: {
    paddingTop: 20,
    paddingBottom: 20,
  },
  link: {
    color: `${theme.styleTypes.primary.accent} !important`,
    padding: 10,
    cursor: 'pointer',
  },
  button: {
    width: '100%',
    marginTop: 10,
    cursor: 'pointer',
  },
  url: {
    marginTop: 20,
    width: '100%',

    '& div': {
      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
    },

    '& input': {
      width: '100%',
      padding: 15,
      borderRadius: 6,
      border: `solid 1px ${theme.styleTypes.primary.accent}`,
    },
  },
});

export default @injectSheet(styles) @inject('stores', 'actions') @observer class PublishDebugLogModal extends Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
  };

  static contextTypes = {
    intl: intlShape,
  };

  state = {
    log: null,
    error: false,
    isSendingLog: false,
  }

  // Close this modal
  close() {
    ModalState.isModalVisible = false;
  }

  async publishDebugInfo() {
    debug('debugInfo: starting publish');
    this.setState({
      isSendingLog: true,
    });

    const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);

    const request = await sendAuthRequest(`${DEBUG_API}/create`, {
      method: 'POST',
      body: JSON.stringify({
        log: debugInfo,
      }),
    }, false);

    debug(`debugInfo: publishing status: ${request.status}`);
    if (request.status === 200) {
      const response = await request.json();
      if (response.id) {
        this.setState({
          log: response.id,
        });
      } else {
        this.setState({
          error: true,
        });
      }
    } else {
      this.setState({
        error: true,
      });
    }

    debug('debugInfo: finished publishing');
  }

  render() {
    const { isModalVisible } = ModalState;

    const {
      classes,
    } = this.props;

    const {
      log,
      error,
      isSendingLog,
    } = this.state;

    const { intl } = this.context;

    return (
      <Modal
        isOpen={isModalVisible}
        shouldCloseOnOverlayClick
        close={() => this.close()}
      >
        <div className={classes.container}>
          <H1>
            {intl.formatMessage(messages.title)}
          </H1>
          { log && (
            <>
              <p className={classes.info}>{intl.formatMessage(messages.published)}</p>
              <Input
                className={classes.url}
                showLabel={false}
                field={{
                  type: 'url',
                  value: `${DEBUG_API}/${log}`,
                  disabled: true,
                }}
                readonly
              />
            </>
          )}

          {error && (
            <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
          )}

          {!log && !error && (
            <>
              <p className={classes.info}>{intl.formatMessage(messages.info)}</p>

              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link}>
                {intl.formatMessage(messages.privacy)}
              </a>
              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link}>
                {intl.formatMessage(messages.terms)}
              </a>

              <Button
                type="button"
                label={intl.formatMessage(messages.publish)}
                className={classes.button}
                onClick={() => this.publishDebugInfo()}
                disabled={isSendingLog}
              />
            </>
          )}
        </div>
      </Modal>
    );
  }
}

PublishDebugLogModal.wrappedComponent.propTypes = {
  stores: PropTypes.shape({
    app: PropTypes.instanceOf(AppStore).isRequired,
  }).isRequired,
  actions: PropTypes.shape({
    service: PropTypes.instanceOf(ServicesStore).isRequired,
  }).isRequired,
};