// @flow

import * as React from 'react';
import { createFragmentContainer, graphql, commitMutation } from 'react-relay/compat';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import Button from 'app/components/shared/Button';
import Panel from 'app/components/shared/Panel';
import RecoveryCodeList from 'app/components/RecoveryCodeList';
import type { RecoveryCodes_totp } from './__generated__/RecoveryCodes_totp.graphql';
import type { RelayProp } from 'react-relay';

type Props = {
  relay: RelayProp,
  totp: RecoveryCodes_totp
};

type State = {
  copiedRecoveryCodes: boolean,
  generatingNewCodes: boolean
};

type TOTPRecoveryCodes = $PropertyType<RecoveryCodes_totp, 'recoveryCodes'>;

function recoveryCodeText(recoveryCodes: TOTPRecoveryCodes): ?string {
  if (recoveryCodes && recoveryCodes.codes) {
    return recoveryCodes.codes.reduce((memo, { code }) => memo.concat(code), []).join('\n');
  }
  return '';
}

class RecoveryCodes extends React.PureComponent<Props, State> {
  state = {
    copiedRecoveryCodes: false,
    generatingNewCodes: false
  }

  render() {
    return (
      <div className="p4">
        <h2 className="m0 h2 semi-bold mb5">Current Recovery Codes</h2>
        <p>Recovery codes are used if you lose access to your code generator.</p>
        <p>These codes should be treated just like your password. Weʼd suggest saving them into a secure password manager.</p>
        <Panel className="mb3">
          <Panel.Section>
            <CopyToClipboard
              text={recoveryCodeText(this.props.totp.recoveryCodes)}
              onCopy={this.handleRecoveryCodeCopy}
            >
              <Button theme="default" outline={true}>
                {this.state.copiedRecoveryCodes
                  ? 'Copied!'
                  : 'Copy'}
              </Button>
            </CopyToClipboard>
            <RecoveryCodeList
              recoveryCodes={this.props.totp.recoveryCodes}
              isLoading={this.state.generatingNewCodes}
            />
          </Panel.Section>
        </Panel>
        <h2 className="m0 h4 semi-bold mb5">Generate New Recovery Codes</h2>
        <p>When you generate new recovery codes, your current codes will be removed. Please ensure you copy your new recovery codes after they’ve been generated.</p>
        <Button
          className="col-12"
          theme="warning"
          outline={true}
          onClick={this.handleRegenerateRecoveryCodes}
          loading={this.state.generatingNewCodes && "Generating New Recovery Codes…"}
          disabled={this.state.generatingNewCodes}
        >
          Generate New Recovery Codes
        </Button>
      </div>
    );
  }

  handleRecoveryCodeCopy = (_text, result) => {
    if (!result) {
      alert('We couldnʼt put this on your clipboard for you, please copy it manually!');
    }
    this.setState({ copiedRecoveryCodes: true });
  };

  handleRegenerateRecoveryCodes = () => {
    this.setState({ generatingNewCodes: true });

    commitMutation(this.props.relay.environment, {
      mutation: graphql`
          mutation RecoveryCodesRegenerateMutation($input: TOTPRecoveryCodesRegenerateInput!) {
            totpRecoveryCodesRegenerate(input: $input) {
              totp {
                id
                recoveryCodes {
                  id
                  codes {
                    code
                    consumed
                  }
                }
              }
            }
          }
        `,
      variables: { input: { totpId: this.props.totp.id } },
      onCompleted: () => {
        this.setState({ generatingNewCodes: false });
      },
      onError: (error) => {
        alert(error);
      }
    });
  }
}

export default createFragmentContainer(RecoveryCodes, {
  totp: graphql`
    fragment RecoveryCodes_totp on TOTP {
      id
      recoveryCodes {
        id
        ...RecoveryCodeList_recoveryCodes
        codes {
          code
          consumed
        }
      }
    }
  `
});

@@ -1235,54 +1235,114 @@
 are 
-used if you lose access to your code generator
+the only way to get access to your account if you lose access %0A          to your authenticator application
 .%3C/p
@@ -1358,13 +1358,16 @@
  %3Cp%3E
-These
+Recovery
  cod
@@ -1391,13 +1391,8 @@
 ted 
-just 
 like
@@ -1413,10 +1413,8 @@
 . We
-%CA%BCd
  sug
@@ -1432,18 +1432,16 @@
  them in
-to
  a secur
@@ -1458,16 +1458,66 @@
  manager
+, or printing them and storing them somewhere safe
 .%3C/p%3E%0A  
@@ -2290,15 +2290,16 @@
 our 
-current
+previous
  cod
@@ -2310,17 +2310,25 @@
 ill 
-be remove
+no longer be vali
 d. P
@@ -2344,21 +2344,31 @@
 ure you 
+save a 
 copy 
+of 
 your new

Make recovery codes text consistent with other modals