/* eslint-disable import/no-extraneous-dependencies */
import { FC } from 'react';
import { EditorState } from 'lexical';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
import { ListItemNode, ListNode } from '@lexical/list';
import { CodeHighlightNode, CodeNode } from '@lexical/code';
import { AutoLinkNode, LinkNode } from '@lexical/link';
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
import { TRANSFORMERS } from '@lexical/markdown';
import { useResponsiveLayout, useTheme } from 'hooks';
import { BottomAction } from 'components/rich-text/bottom-action';
import { Visible } from 'components/visible';
import { MessageFragment } from 'expo-schema';
import { isEditingMessageVar } from 'state-management/chat';
import { useReactiveVar } from '@apollo/client';
import {
  Toolbar,
  ListMaxIndentLevel,
  CodeHighlight,
  AutoLink,
  LoadDraft,
  OnSubmit,
  EditMessage,
} from './plugins';
import { theme as editorTheme } from './theme';
import { Placeholder } from './placeholder';

import './style.css';

const editorConfig = {
  namespace: 'chat-input',
  theme: editorTheme,
  onError(error: any) {
    throw error;
  },
  // All custom nodes will go here
  nodes: [
    HeadingNode,
    ListNode,
    ListItemNode,
    QuoteNode,
    CodeNode,
    CodeHighlightNode,
    TableNode,
    TableCellNode,
    TableRowNode,
    AutoLinkNode,
    LinkNode,
  ],
};

export const Editor: FC<EditorProps> = ({ draft, message, handleChange, handleSendMessage }) => {
  const isEditingMessage = useReactiveVar(isEditingMessageVar);
  const { isSmall } = useResponsiveLayout();
  const { theme } = useTheme();
  const { colors } = theme;

  const handleChangeLocal = (editorState: EditorState) => {
    if (!isEditingMessage) {
      handleChange(editorState);
    }
  };

  const isMessage = 'message';
  const isLargeScreen = isMessage && !isSmall;

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div style={{ width: '100%' }}>
        <Visible if={isLargeScreen}>
          <Toolbar />
        </Visible>
        <div
          style={{
            background: 'transparent',
            position: 'relative',
          }}
        >
          <RichTextPlugin
            contentEditable={
              <ContentEditable
                style={{
                  caretColor: colors.title,
                  color: colors.title,
                  fontFamily: 'CircularStd-Book',
                  minHeight: 56,
                  resize: 'none',
                  overflowY: 'scroll',
                  fontSize: 15,
                  position: 'relative',
                  tabSize: 1,
                  outline: 0,
                  padding: '10px 20px',
                }}
              />
            }
            placeholder={<Placeholder />}
          />
          <ClearEditorPlugin />
          <HistoryPlugin />
          <AutoFocusPlugin />
          <CodeHighlight />
          <ListPlugin />
          <LinkPlugin />
          <AutoLink />
          <EditMessage message={message} />
          <LoadDraft draft={draft} />
          <OnChangePlugin onChange={handleChangeLocal} />
          <OnSubmit onSubmit={handleSendMessage} />
          <ListMaxIndentLevel maxDepth={7} />
          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
        </div>
        <BottomAction onSendMessage={handleSendMessage} variant="message" />
      </div>
    </LexicalComposer>
  );
};

interface EditorProps {
  initialState: any;
  draft: MessageFragment | undefined;
  message: MessageFragment | undefined;
  handleChange: (editorState: EditorState) => void;
  handleSendMessage: (editorState?: EditorState) => void;
}