// @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;
    const success = await this.props.auth.deleteUser();

    if (success) {
      this.props.auth.logout();
    }

    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.
            </HelpText>

            <HelpText>
              <strong>Note:</strong> Signing back in will cause your 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);