import {motion} from 'framer-motion';

import {IconTerminal} from 'sentry/icons';
import {t} from 'sentry/locale';
import testableTransition from 'sentry/utils/testableTransition';
import ContinueButton from 'sentry/views/relocation/components/continueButton';
import RelocationCodeBlock from 'sentry/views/relocation/components/relocationCodeBlock';
import StepHeading from 'sentry/views/relocation/components/stepHeading';
import Wrapper from 'sentry/views/relocation/components/wrapper';

import type {StepProps} from './types';

export function EncryptBackup(props: StepProps) {
  const code =
    'SENTRY_DOCKER_IO_DIR=/path/to/key ./sentry-admin.sh \\\nexport global --encrypt-with /sentry-admin/key.pub /sentry-admin/export.tar';
  return (
    <Wrapper data-test-id="encrypt-backup">
      <StepHeading step={3}>
        {t('Create an encrypted backup of your current self-hosted instance')}
      </StepHeading>
      <motion.div
        transition={testableTransition()}
        variants={{
          initial: {y: 30, opacity: 0},
          animate: {y: 0, opacity: 1},
          exit: {opacity: 0},
        }}
      >
        <p>
          {t(
            'You’ll need to have the public key saved in the previous step accessible when you run the following command in your terminal. Make sure your current working directory is the root of your `self-hosted` install when you execute it.'
          )}
        </p>
        <RelocationCodeBlock
          dark
          language="bash"
          filename="TERMINAL"
          icon={<IconTerminal />}
          hideCopyButton={false}
        >
          {code}
        </RelocationCodeBlock>
        <p className="encrypt-help">
          <b>{t('Understanding the command:')}</b>
        </p>
        <p>
          <mark>{'SENTRY_DOCKER_IO_DIR=/path/to/key'}</mark>
          {t('Map local directory to ')}
          <mark>{'/sentry-admin'}</mark>
          {t('in your Docker container.')}
        </p>
        <p>
          <mark>{'./sentry-admin.sh'}</mark>
          {t(
            'This is a script present in your self-hosted installation containing admin tools.'
          )}
        </p>
        <p>
          <mark>{'export global'}</mark>
          {t('Perform a global export of your entire self-hosted instance.')}
        </p>
        <p>
          <mark>{'--encrypt-with /sentry-admin/key.pub'}</mark>
          {t('Encrypts the export with the public key created in the last step.')}
        </p>
        <p>
          <mark>{'/sentry-admin/file.tar'}</mark>
          {t(
            'Writes the export file into the same directory where the public key file is located.'
          )}
        </p>
        <p className="encrypt-note">
          <i>
            {t('Note: Depending on your configuration, you may need to use ')}
            <mark>sudo</mark>
            {t('for this command.')}
          </i>
        </p>
        <ContinueButton priority="primary" onClick={() => props.onComplete()} />
      </motion.div>
    </Wrapper>
  );
}

export default EncryptBackup;