import { createContext, useEffect, useState, useRef } from 'react';
import { Button, Flex, Modal } from 'antd';
import { FilterOutlined, FilterTwoTone, CloseOutlined, CloseCircleOutlined, ExpandAltOutlined, ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
import Draggable from 'react-draggable';
import 'react-quill/dist/quill.snow.css';

import LexicalEditor from '@/components/LexicalEditor';

import { $getRoot, $getSelection } from 'lexical';

import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const theme = {
  // Theme styling goes here
  //...
};

// Catch any errors that occur during Lexical updates and log them
// or throw them as needed. If you don't throw them, Lexical will
// try to recover gracefully without losing user data.
function onError(error) {
  console.error(error);
}
const LexicalEditor1 = () => {
  const initialConfig = {
    namespace: 'MyEditor',
    theme,
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin contentEditable={<ContentEditable />} placeholder={<div>Enter some text...</div>} ErrorBoundary={LexicalErrorBoundary} />
      <HistoryPlugin />
      <AutoFocusPlugin />
    </LexicalComposer>
  );
};

const EmailEditor = ({ mobile, open, setOpen, fromEmail, reference, ...props }) => {

  const [dragDisabled, setDragDisabled] = useState(true);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef(null);
  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };


  return (
    <Modal
      title={
        <div className=' cursor-move flex justify-between pr-10'
          onMouseOver={() => {
            if (dragDisabled) {
              setDragDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDragDisabled(true);
          }}
          // fix eslintjsx-a11y/mouse-events-have-key-events
          // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
          onFocus={() => {}}
          onBlur={() => {}}
          // end
        >

          {reference ? '回复: ' : '写邮件: ' }{fromEmail}
        </div>
      }
      // closeIcon={<> <ShrinkOutlined /> <ArrowsAltOutlined /></>}
      open={open}
      mask={false}
      maskClosable={false}
      keyboard={false}
      classNames={{ content: '!border !border-solid !border-indigo-500 rounded !p-2' }}
      okButtonProps={{ className: 'bg-indigo-500 shadow shadow-indigo-300 hover:!bg-indigo-400 active:bg-indigo-400 focus:bg-indigo-400' }}
      cancelButtonProps={{ className: 'hover:!text-indigo-500 hover:!border-indigo-400 active:border-indigo-400 focus:border-indigo-400' }}
      style={{ bottom: 0, left: '18%' }}
      width={mobile === false ? '800px' : '100%'}
      zIndex={2}
      // footer={false}
      onCancel={() => setOpen(false)}
      destroyOnClose={false} // todo:
      modalRender={(modal) => (
        <Draggable disabled={dragDisabled} bounds={bounds} nodeRef={draggleRef} onStart={(event, uiData) => onStart(event, uiData)}>
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}>
      <LexicalEditor />
    </Modal>
  );
};

export default EmailEditor;
