import { Button } from "@material-ui/core";
import React, { useContext, useEffect, useCallback } from "react";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import Tooltip from "@material-ui/core/Tooltip";
import { GrammarContext } from "../context/GrammarContext";
import { makeStyles } from "@material-ui/core/styles";

const grammar = require("usfm-grammar");

const useStyles = makeStyles((theme) => ({
  button: {
    [theme.breakpoints.down("xs")]: {
      height: 36,
    },
  },
  buttonText: {
    [theme.breakpoints.down("xs")]: {
      display: "none",
    },
  },
}));

function ParseUsfm() {
  const classes = useStyles();
  const {
    usfmValue,
    setJsonValue,
    setTabValue,
    alert,
    mode,
    type,
    setType,
    setOpen,
  } = useContext(GrammarContext);
  const parseText = useCallback(() => {
    if (usfmValue === "") {
      return alert("warning", "No USFM Data to Convert");
    }
    setJsonValue("");
    setOpen(true);
    setTabValue(0);
    setTimeout(() => {
      usfmParser();
    }, 500);
    const usfmParser = () => {
      const typeMode = type === "all" ? null : grammar.FILTER.SCRIPTURE;
      try {
        const myUsfmParser =
          mode === "relaxed"
            ? new grammar.USFMParser(usfmValue, grammar.LEVEL.RELAXED)
            : new grammar.USFMParser(usfmValue);
        setJsonValue(
          JSON.stringify(myUsfmParser.toJSON(typeMode), undefined, 2)
        );
      } catch (e) {
        setJsonValue(e.toString());
        alert("error", "Error parsing USFM data");
      }
      setOpen(false);
    };
  }, [alert, mode, setJsonValue, setOpen, setTabValue, type, usfmValue]);

  useEffect(() => {
    if (type === "scripture") {
      parseText();
      setType("all");
    }
  }, [type, setType, parseText]);
  return (
    <div>
      <Tooltip title="Convert">
        <Button
          variant="contained"
          color="primary"
          onClick={parseText}
          endIcon={<KeyboardArrowRightIcon />}
          className={classes.button}
        >
          <span className={classes.buttonText}>Convert</span>
        </Button>
      </Tooltip>
    </div>
  );
}

export default ParseUsfm;