import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import React = require('react');
import ReactLoading from 'react-loading';
import Typist from 'react-typist';
import { Doc } from '../../../fields/Doc';
import { Docs } from '../../documents/Documents';
import './GPTPopup.scss';

interface GPTPopupProps {
    visible: boolean;
    text: string;
    loadingSummary: boolean;
    callApi: (e: React.PointerEvent) => Promise<void>;
}

@observer
export class GPTPopup extends React.Component<GPTPopupProps> {
    static Instance: GPTPopup;

    @observable
    private summaryDone: boolean = false;
    @observable
    private sidebarId: string = '';
    @action
    public setSummaryDone = (done: boolean) => {
        this.summaryDone = done;
    };
    @action
    public setSidebarId = (id: string) => {
        this.sidebarId = id;
    };

    public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
    
    /**
     * Transfers the summarization text to a sidebar annotation text document.
     */
    private transferToText = () => {
        const newDoc = Docs.Create.TextDocument(this.props.text.trim(), {
            _width: 200,
            _height: 50,
            _fitWidth: true,
            _autoHeight: true,
        });
        this.addDoc(newDoc, this.sidebarId);
    };

    constructor(props: GPTPopupProps) {
        super(props);
        GPTPopup.Instance = this;
    }

    componentDidUpdate = () => {
        if (this.props.loadingSummary) {
            this.setSummaryDone(false);
        }
    };

    render() {
        return (
            <div className="summary-box" style={{ display: this.props.visible ? 'flex' : 'none' }}>
                <div className="summary-heading">
                    <label className="summary-text">SUMMARY</label>
                    {this.props.loadingSummary && <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />}
                </div>
                <div className="content-wrapper">
                    {!this.props.loadingSummary &&
                        (!this.summaryDone ? (
                            <Typist
                                key={this.props.text}
                                avgTypingDelay={15}
                                cursor={{ hideWhenDone: true }}
                                onTypingDone={action(() => {
                                    setTimeout(
                                        action(() => {
                                            this.summaryDone = true;
                                        }),
                                        500
                                    );
                                })}>
                                {this.props.text}
                            </Typist>
                        ) : (
                            this.props.text
                        ))}
                </div>
                {!this.props.loadingSummary && (
                    <div className="btns-wrapper">
                        {this.summaryDone ? (
                            <>
                                <button className="icon-btn" onPointerDown={e => this.props.callApi(e)}>
                                    <FontAwesomeIcon icon="redo-alt" size="lg" />
                                </button>
                                <button
                                    className="text-btn"
                                    onClick={e => {
                                        this.transferToText();
                                    }}>
                                    Transfer to Text
                                </button>
                            </>
                        ) : (
                            <div className="summarizing">
                                <label>Summarizing</label>
                                <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
                                <button
                                    className="btn-secondary"
                                    onClick={e => {
                                        this.setSummaryDone(true);
                                    }}>
                                    Stop Animation
                                </button>
                            </div>
                        )}
                    </div>
                )}
                {this.summaryDone && (
                    <div className="ai-warning">
                        <FontAwesomeIcon icon="exclamation-circle" size="sm" style={{ paddingRight: '5px' }} />
                        AI generated responses can contain inaccurate or misleading content.{' '}
                        <a target="_blank" href="https://www.nytimes.com/2023/02/08/technology/ai-chatbots-disinformation.html">
                            Learn More
                        </a>
                    </div>
                )}
            </div>
        );
    }
}