import * as React from "react"
import {TextField} from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Srl from "../../data/Srl";
import SrlEditable from "../SrlEditable";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import {exampleSrl} from "./exampleSrl";
import Snackbar from "@material-ui/core/Snackbar";
import {FrameLabelSet} from "../../data/FrameLabelSet";

function useFrameLabelSet() {
    const [predicateLabelsStringified, setPredicateLabelsStringified] = React.useState("did-what");
    const [argLabelsStringified, setArgLabelsStringified] = React.useState("who to-whom for-whom when where why how from to");
    const predicateLabels = predicateLabelsStringified.split(/\s+/).filter(x=>x.length>0);
    const argLabels = argLabelsStringified.split(/\s+/).filter(x=>x.length>0);
    return {
        frameLabelSet: new FrameLabelSet('demo-frame-set', predicateLabels, argLabels, false),
        spaceSeparatedPredLabels: predicateLabelsStringified,
        spaceSeparatedArgLabels: argLabelsStringified,
        setSpaceSeparatedPredLabels: setPredicateLabelsStringified,
        setSpaceSeparatedArgLabels: setArgLabelsStringified
    };
}

export default function EditableDemo() {
    const {frameLabelSet, spaceSeparatedArgLabels, spaceSeparatedPredLabels, setSpaceSeparatedArgLabels, setSpaceSeparatedPredLabels} = useFrameLabelSet();

    const [sentence, setSentence] = React.useState("John baked Mary a cake .");

    const tokens = sentence.split(/\s+/).filter(x=>x.length>0);

    const [srl, setSrl] = React.useState<Srl|null>(null);

    const [copyToastOpen, setCopyToastOpen] = React.useState(false);

    function handleExportXML() {
        if(!srl) return;
        const doc = new DOMParser().parseFromString("<?xml version=\"1.0\" encoding=\"UTF-8\"?>", "application/xml");
        const textArea = document.createElement('textarea');
        textArea.value = srl.toXml(doc).outerHTML;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        setCopyToastOpen(true);
    }

    function handleAnnotate() {
        setSrl(Srl.createEmptySrlFromTokens(tokens, frameLabelSet.name));
    }

    const annotateEnabled = frameLabelSet.targets.length > 0 && frameLabelSet.args.length > 0 && tokens.length > 0;

    return <div>
        <br/>
        <Typography variant={"h5"}>SRL manual annotator demo</Typography>
        <br/>
        <br/>
        <div>
            <TextField fullWidth={true} label={"predicated labels"} value={spaceSeparatedPredLabels} onChange={e=>setSpaceSeparatedPredLabels(e.target.value)}/>
        </div>
        <br/>
        <div>
            <TextField fullWidth={true} label={"argument labels"} value={spaceSeparatedArgLabels} onChange={e=>setSpaceSeparatedArgLabels(e.target.value)}/>
        </div>
        <br/>
        <div>
            <TextField fullWidth={true} label={"sentence"} value={sentence} onChange={e=>setSentence(e.target.value)}/>
        </div>

        <br/>
        <div>
            <Button variant={"contained"} disabled={!annotateEnabled} onClick={handleAnnotate} color={"primary"}>Annotate</Button>
            &nbsp;&nbsp;
            <Button variant={"contained"} disabled={!srl} onClick={handleExportXML} color={"primary"}>Export XML</Button>
        </div>
        <br/>
        {srl &&
        <SrlEditable srl={srl} onRequestSrlChange={srl => setSrl(srl)} frameLabelSets={[frameLabelSet]}/>
        }
        <br/>
        <Snackbar
            anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
            }}
            open={copyToastOpen}
            autoHideDuration={2000}
            onClose={()=>setCopyToastOpen(false)}
            message="XML copied to clipboard"
        />
    </div>
}