// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { inject, observer } from 'mobx-react';
import Button from 'components/Button';
import Flex from 'shared/components/Flex';
import HelpText from 'components/HelpText';
import Modal from 'components/Modal';
import AuthStore from 'stores/AuthStore';

type Props = {
  auth: AuthStore,
  onRequestClose: () => *,
};

@observer
class UserDelete extends React.Component<Props> {
  @observable isDeleting: boolean;

  handleSubmit = async (ev: SyntheticEvent<*>) => {
    ev.preventDefault();
    this.isDeleting = true;

    try {
      await this.props.auth.deleteUser();
      this.props.auth.logout();
    } finally {
      this.isDeleting = false;
    }
  };

  render() {
    const { auth, ...rest } = this.props;

    return (
      <Modal isOpen title="Delete Account" {...rest}>
        <Flex column>
          <form onSubmit={this.handleSubmit}>
            <HelpText>
              Are you sure? Deleting your account will destory identifying data
              associated with your user and cannot be undone. You will be
              immediately logged out of Outline and all your API tokens will be
              revoked.
            </HelpText>
            <HelpText>
              <strong>Note:</strong> Signing back in will cause a new account to
              be automatically reprovisioned.
            </HelpText>
            <Button type="submit" danger>
              {this.isDeleting ? 'Deleting…' : 'Delete My Account'}
            </Button>
          </form>
        </Flex>
      </Modal>
    );
  }
}

export default inject('auth')(UserDelete);