import {Col, Container, Row, Spinner} from "react-bootstrap";
import {Configuration, DefaultApi} from "../service/openapi";
import {useEffect, useState} from "react";

export default function Continuation(props) {
    let [continuation, setContinuation] = useState<string>("")
    let [computing, setComputing] = useState<boolean>(false)


    const configuration = new Configuration({
        basePath: 'https://api.alas.friedl.net'
    });

    const api = new DefaultApi(configuration);
    const fetchContinuation = async () => {
        try {
            setComputing(true)
            let resp = await api.getContinuationDialogContinuationGet({text: props.text});
            setComputing(false)
            return resp;
        } catch (error) {
            console.error(error);
        }
    }

    useEffect(() => {
        fetchContinuation()
            .then(r => setContinuation(r));
    }, [props])

    return (
        <Container className={"mt-5"}>
            <Row className={"justify-content-center mb-3"}>
                <h4 style={{width: "auto"}}>Effective Response</h4>
            </Row>
            <Row className={"justify-content-center"}>
                {computing
                    ? <Spinner animation="border" />
                    : continuation && continuation !== "\"I\"" && continuation !== '""'
                            ? <figure style={{width: "auto"}}>
                                <blockquote className="blockquote">
                                    <p>{continuation}</p>
                                </blockquote>
                                <figcaption className={"blockquote-footer"}>
                                    use at own risk
                                </figcaption>
                            </figure>
                            : <p className={"text-muted"} style={{width: "auto"}}>Does not compute.</p>
                }
            </Row>
        </Container>
    );
}