/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import React from 'react';
import {Button, Modal} from 'antd';
import {Layout} from 'flipper-plugin';
import {getInstance as getFormInstance} from '../../../fb-stubs/Logger';
import {useDispatch} from '../../../utils/useStore';
import {setStaticView} from '../../../reducers/connections';
import SupportRequestFormV2 from '../../../fb-stubs/SupportRequestFormV2';

export function GuideEndScreen(props: {
  showModal: boolean;
  toggleModal: (arg0: boolean) => void;
}) {
  const dispatch = useDispatch();
  const problemSolved = () => {
    props.toggleModal(false);
  };
  const loadForm = () => {
    getFormInstance().track('usage', 'support-form-source', {
      source: 'sidebar',
      group: undefined,
    });
    dispatch(setStaticView(SupportRequestFormV2));
    problemSolved();
  };

  return (
    <Modal
      title="Has your problem been solved OR do you want to file a support request?"
      visible={props.showModal}
      width={650}
      footer={null}
      onCancel={() => props.toggleModal(false)}
      bodyStyle={{maxHeight: 800, overflow: 'auto'}}>
      <Layout.Horizontal gap="huge">
        <Button
          type="primary"
          style={{flex: 1, marginBottom: 18}}
          onClick={problemSolved}>
          Problem Solved
        </Button>
      </Layout.Horizontal>
      <Layout.Horizontal gap="huge">
        <Button type="primary" style={{flex: 1}} onClick={loadForm}>
          File Support Request
        </Button>
      </Layout.Horizontal>
    </Modal>
  );
}

Add modal dialogue for the end screen
Add modal dialogue for the end screen

Summary:
- Added a dialogue with 2 possible end state buttons
    - Problem Solved
    - File Support Request
- This diff is the start of the implementation of the troubleshooting wizard.
- The previously implemented troubleshooting button (D29993355 (https://github.com/facebook/flipper/commit/921a65bc17ce4a9fb9d65689fe8e8d27ebc843fc)) now links to a modal dialogue box.
- This is essentially the last screen of the troubleshooting guide to be implemented.
- We have options for a user to either select file a support request if the issue persists after navigating the guide or click on problem solved if the guide helped them solve it.
- Selecting option 2 (file support request) links to the pre-existing form

The modal has been implemented as an independent reusable component and can be easily extended.

Reviewed By: passy

Differential Revision: D30069270

fbshipit-source-id: f61bf8c03de786e11b7f06194328dbee703abf8b
