/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import styled from 'styled-components';
import { __ } from '@googleforcreators/i18n';
import PropTypes from 'prop-types';
import {
  Button,
  BUTTON_SIZES,
  BUTTON_TYPES,
  BUTTON_VARIANTS,
} from '@googleforcreators/design-system';

const Message = styled.div`
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  padding: 20px;
  button {
    margin-right: 6px;
  }
`;

const P = styled.p`
  margin: 0 0 8px 0;
`;

const Wrapper = styled.div`
  display: flex;
`;

function ErrorActions({ error, errorInfo }) {
  const body = encodeURIComponent(`${error}${errorInfo.componentStack}`);
  const reportUrl = `https://github.com/googleforcreators/web-stories-wp/issues/new?labels=Type%3A+Bug&template=bug_report.md&title=${error}&body=${body}`;

  const reload = () => {
    window.location.reload(true);
  };

  return (
    <Message>
      <P>{__('Something went wrong!', 'web-stories')}</P>
      <P>
        {__(
          'The editor has crashed. Please try reloading the page and report the error using the button below.',
          'web-stories'
        )}
      </P>
      <P>{__('Apologies for the inconvenience.', 'web-stories')}</P>
      <Wrapper>
        <Button
          variant={BUTTON_VARIANTS.RECTANGLE}
          type={BUTTON_TYPES.QUATERNARY}
          size={BUTTON_SIZES.SMALL}
          onClick={reload}
        >
          {__('Reload', 'web-stories')}
        </Button>
        <Button
          variant={BUTTON_VARIANTS.RECTANGLE}
          type={BUTTON_TYPES.PRIMARY}
          size={BUTTON_SIZES.SMALL}
          href={reportUrl}
          target="_blank"
          rel="noreferrer"
        >
          {__('Report Error', 'web-stories')}
        </Button>
      </Wrapper>
    </Message>
  );
}

ErrorActions.propTypes = {
  error: PropTypes.instanceOf(Error),
  errorInfo: PropTypes.object,
};

export default ErrorActions;

@@ -1015,24 +1015,98 @@
 px;%0A  %7D%0A%60;%0A%0A
+const TextArea = styled.textarea%60%0A  width: 100%25;%0A  min-height: 200px;%0A%60;%0A%0A
 const P = st
@@ -1113,16 +1113,16 @@
 yled.p%60%0A
-
   margin
@@ -1245,34 +1245,26 @@
 nst 
-body = encodeURIComponent(
+textAreaContent = 
 %60$%7Be
@@ -1268,16 +1268,18 @@
 $%7Berror%7D
+%5Cn
 $%7BerrorI
@@ -1298,17 +1298,16 @@
 tStack%7D%60
-)
 ;%0A  cons
@@ -1323,18 +1323,22 @@
 rl =
- %60
+%0A    '
 https://
 gith
@@ -1337,133 +1337,62 @@
 s://
-github.com/googleforcreators/web-stories-wp/issues/new?labels=Type%253A+Bug&template=bug_report.md&title=$%7Berror%7D&body=$%7Bbody%7D%60
+wordpress.org/support/plugin/web-stories/#new-topic-0'
 ;%0A%0A 
@@ -1715,24 +1715,24 @@
 %0A      %3C/P%3E%0A
-
       %3CP%3E%7B__
@@ -1784,24 +1784,189 @@
 ries')%7D%3C/P%3E%0A
+      %3CP%3E%0A        %3CTextArea%0A          value=%7BtextAreaContent%7D%0A          onFocus=%7B(e) =%3E e.target.setSelectionRange(0, textAreaContent.length)%7D%0A        /%3E%0A      %3C/P%3E%0A
       %3CWrapp

Make editor ErrorBoundary more useful (#10387)