import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from '@chakra-ui/react';
import { basicSetup } from '@codemirror/basic-setup';
import { indentWithTab } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { Extension } from '@codemirror/state';
import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
import { useEffect, useMemo, useState } from 'react';
import { Node } from 'react-flow-renderer';
import CodeMirror from 'rodemirror';

type RuleEditorProps = {
  node: Node;
  isOpen: boolean;
  onSave: (rule: string) => void;
  onClose: () => void;
};

const DEFAULT_RULE = `(function(_providers) {
  // rule logic goes here
    \n
  return { nextState: "", attributes: {} };
  /* eslint-disable no-undef */
})(_providers)\n`;

export default function RuleEditor(props: RuleEditorProps) {
  const { node, isOpen, onSave, onClose } = props;
  const { state } = node.data;

  const [value, setValue] = useState(state.rule || DEFAULT_RULE);
  const [editorView, setEditorView] = useState<EditorView | null>(null);

  const handleSave = () => {
    onSave(value);
    onClose();
  };

  const handleClose = () => {
    onClose();
  };

  const handleChange = (v: ViewUpdate) => {
    if (v.docChanged) {
      setValue(v.state.doc.toString());
    }
  };

  useEffect(() => {
    if (!editorView) return;

    const pos = value.indexOf('here\n');
    const transaction = editorView.state.update({
      selection: { anchor: pos + 7, head: pos + 7 },
    });

    editorView.focus();
    editorView.dispatch(transaction);
  }, [editorView]);

  const extensions = useMemo<Extension[]>(() => [basicSetup, keymap.of([indentWithTab]), javascript()], []);

  return (
    <Modal isOpen={isOpen} onClose={handleClose} isCentered>
      <ModalOverlay />
      <ModalContent maxW="56rem">
        <ModalHeader>Rule Editor - {node.data.label}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <CodeMirror
            extensions={extensions}
            value={value}
            onUpdate={handleChange}
            onEditorViewChange={(editorView) => setEditorView(editorView)}
          />
        </ModalBody>

        <ModalFooter>
          <Button size="sm" onClick={handleSave} colorScheme="blue">
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}