/* eslint-disable eqeqeq */
/* eslint-disable object-shorthand */
/* eslint-disable no-unused-vars */
/* eslint-disable prefer-rest-params */
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useRef, useEffect, useState } from "react";
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from "prop-types";
import TextareaAutosize from "react-textarea-autosize";
import CodeMirror from "react-codemirror";
import { Remarkable } from "remarkable";
import { CgMathPlus, CgArrowUp, CgArrowDown, CgTrash } from "react-icons/cg";
import { BsFillCaretRightFill } from "react-icons/bs";
import {
  AddCellButton,
  CellButton,
  CellHead,
  OtherCellButtonWrapper,
  Output,
  CellContainer,
  RunContainer,
  CellBodyContainer,
} from "./Cell.style";
import roll from "./static/rolling.svg";

require("codemirror/lib/codemirror.css");
require("codemirror/mode/javascript/javascript");
require("codemirror/theme/yeti.css");
require("codemirror/addon/edit/closebrackets");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/hint/javascript-hint");
require("codemirror/addon/hint/show-hint");

export default function Cell({
  cell,
  dispatch,
  currentCell,
  setCurrentCell,
  cellId,
  activeCell,
  setActiveCell,
}) {
  const cellOutputId = `out_${cellId}`;
  const refCode = useRef(null);
  const refOutput = useRef("");
  useEffect(() => {}, [cellId, currentCell]);
  // eslint-disable-next-line consistent-return
  const getCode = async () => {
    window.current_cell = cellId;
    if (cell.type === "code") {
      const input = refCode.current.getCodeMirror().getValue();
      try {
        // eslint-disable-next-line no-eval
        let output = ("global", eval)(input) || "";
        if (Array.isArray(output)) {
          output = window.print_val(output);
        } else if (typeof output === "object" && output !== null) {
          output = JSON.stringify(output);
          if (output === "{}") {
            output = "";
          }
        } else if (input.includes("console.log(")) {
          // retreive value from the console function
          console.oldLog = console.log;
          console.log = function (value) {
            return value;
          };
          // eslint-disable-next-line no-eval
          output = eval(input);
          if (Array.isArray(output)) {
            output = window.print_val(output);
          } else if (typeof output === "object" && output !== null) {
            output = JSON.stringify(output);
            if (output === "{}") {
              output = "";
            }
          }
        }
        // eslint-disable-next-line no-eval
        const cellstate = { ...cell, input, output };
        dispatch({ type: "CHANGE_CELL", payload: cellstate });
      } catch (error) {
        const cellstate = { ...cell, input, output: error };
        dispatch({ type: "CHANGE_CELL", payload: cellstate });
      }
    } else {
      const cellstate = { ...cell, input: refCode.current.value };
      // eslint-disable-next-line no-use-before-define
      showOutput();
      dispatch({ type: "CHANGE_CELL", payload: cellstate });
    }
  };

  const setId = (id) => {
    setCurrentCell(id);
  };

  useEffect(() => {
    if (cell.type === "text") {
      refCode.current.value = cell.input;
      const md = new Remarkable();
      refOutput.current.innerHTML = md.render(cell.input);
      refCode.current.style.display = cell.input ? "none" : "block";
    } else {
      refCode.current.getCodeMirror().setValue(cell.input);
      refCode.current.getCodeMirror().setSize("100%", "auto");
      refOutput.current.innerHTML = cell.output;
    }
    // eslint-disable-next-line radix
    const id = parseInt(cell.id.split("_")[1]);
    setId(id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cell]);

  const upCell = (type) => {
    const id = cellId - 1;
    // eslint-disable-next-line no-use-before-define
    newCell(id, type);
  };

  const downCell = (type) => {
    const id = cellId;
    // eslint-disable-next-line no-use-before-define
    newCell(id, type);
  };

  const newCell = (id, type) => {
    // eslint-disable-next-line no-shadow
    const newCell = {
      input: "",
    };

    if (type === "text") {
      newCell.type = "text";
    } else {
      newCell.output = "";
      newCell.type = "code";
    }
    setCurrentCell(currentCell + 1);

    dispatch({ type: "ADD_CELL", payload: newCell, currentId: id });
  };

  const disableOutput = () => {
    if (cell.type === "text") {
      refOutput.current.style.display = "none";
      refCode.current.style.display = "block";
    }
  };

  const showOutput = () => {
    if (cell.type === "text") {
      refOutput.current.style.display = "block";
      refOutput.current.style.background = "white";
      refOutput.current.style.color = "black";
      refCode.current.style.display = "none";
    }
  };

  const deleteCell = () => {
    dispatch({ type: "DELETE_CELL", payload: cell.id });
  };
  return (
    <div style={{ paddingBottom: "30px" }}>
      <CellContainer>
        <RunContainer>
          {cellId == activeCell ? (
            <div
              onClick={() => {
                getCode();
              }}
            >
              <BsFillCaretRightFill id="play" color="#FFDF28" fontSize="30px" />
              <img
                id="activity-loader"
                style={{ display: "none" }}
                width="30px"
                src={roll}
                alt="running-cell"
              />
            </div>
          ) : (
            <div>[{cellId}]:</div>
          )}
        </RunContainer>
        <CellBodyContainer>
          <CellHead>
            <div
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <AddCellButton
                onClick={() => {
                  downCell("code");
                }}
              >
                <CgMathPlus
                  style={{
                    fontSize: "16px",
                    color: "rgb(179, 179, 179)",
                  }}
                />
                Code
              </AddCellButton>
              <AddCellButton
                onClick={() => {
                  upCell("text");
                }}
                style={{
                  marginLeft: "10px",
                }}
              >
                <CgMathPlus
                  style={{
                    fontSize: "16px",
                    color: "rgb(179, 179, 179)",
                  }}
                />
                Text
              </AddCellButton>
            </div>
            {cellId === activeCell ? (
              <OtherCellButtonWrapper>
                <CellButton
                  onClick={() => {
                    upCell("code");
                  }}
                >
                  <div>
                    {" "}
                    <CgArrowUp />
                  </div>
                </CellButton>
                <CellButton
                  onClick={() => {
                    downCell("text");
                  }}
                >
                  <div>
                    <CgArrowDown />
                  </div>
                </CellButton>
                <CellButton
                  onClick={() => {
                    deleteCell();
                  }}
                >
                  <div>
                    <CgTrash />
                  </div>
                </CellButton>
              </OtherCellButtonWrapper>
            ) : (
              <div></div>
            )}
          </CellHead>
          <div
            style={{
              marginTop: "10px",
            }}
          >
            {cell.type === "code" ? (
              <CodeMirror
                onFocusChange={() => {
                  setActiveCell(cellId);
                }}
                value={cell.input}
                ref={refCode}
                options={{
                  mode: "javascript",
                  extraKeys: { "Ctrl-Space": "autocomplete" },
                  autoCloseBrackets: true,
                  matchBrackets: true,
                  lineNumbers: true,
                  tabSize: 4,
                  theme: "yeti",
                  autocorrect: true,
                }}
              />
            ) : (
              <TextCell
                selectCell={() => setActiveCell(cellId)}
                refText={refCode}
              />
            )}
          </div>
        </CellBodyContainer>
      </CellContainer>
      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
        }}
      >
        <Output
          ref={refOutput}
          type={cell.type}
          onClick={() => {
            disableOutput();
          }}
          id={cellOutputId}
        ></Output>
      </div>
    </div>
  );
}

function TextCell({ refText, selectCell }) {
  return (
    <TextareaAutosize onFocus={selectCell} ref={refText}></TextareaAutosize>
  );
}

TextCell.propTypes = {
  refText: PropTypes.object,
  id: PropTypes.string,
};