import { observer } from 'mobx-react';
import React = require('react');
import ReactLoading from 'react-loading';
import Typist from 'react-typist';
import './GPTPopup.scss';

interface GPTPopupProps {
    visible: boolean;
    text: string;
    loadingSummary: boolean;
}

@observer
export class GPTPopup extends React.Component<GPTPopupProps> {
    render() {
        return (
            <div className="summary-box" style={{ display: this.props.visible ? 'block' : 'none' }}>
                <div className="summary-heading">
                    <label className="summary-text">SUMMARY</label>
                    {this.props.loadingSummary ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <></>}
                </div>
                {!this.props.loadingSummary ? (
                    <Typist key={this.props.text} avgTypingDelay={20} cursor={{ hideWhenDone: true }}>
                        {this.props.text}
                    </Typist>
                ) : (
                    <></>
                )}
            </div>
        );
    }
}