Global-sales/src/views/Conversations/Online/Components/EmailDetail.jsx

import { createContext, useEffect, useState } from 'react';
import { Button, Divider, Avatar } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import Modal from '@dckj/react-better-modal';
import { Avatar as Avatar1 } from 'react-chat-elements';
import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
import { isEmpty, olog, stringToColour } from '@/utils/commons';
import EmailEditorPopup from '../Input/EmailEditorPopup';

const TagColorStyle = (tag) => {
  const color = stringToColour(tag);
  return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
};
const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
  let { emailOrigin } = emailDetail;
  emailOrigin = emailOrigin || {};
  // const [open, setOpen] = useState(false);
  const [initialPosition, setInitialPosition] = useState({});
  const [initialSize, setInitialSize] = useState({});
  const [initialMailTo, setInitialMailTo] = useState({});
  function onHandleMove(e) {
    // console.log(e, '--->>> onHandleMove');
    const { top, left, width, height } = e;
    setInitialPosition({ top, left });
    console.log('top, left, width, height', '--->>> onHandleMove');
    console.log(top, left, width, height, '--->>> onHandleMove');
  }
  function onHandleResize(e) {
    // console.log(e, '--->>> onHandleResize');
    const { top, left, width, height } = e;
    setInitialPosition({ top, left });
    setInitialSize({ width, height });
    console.log('top, left, width, height', '--->>> onHandleResize');
    console.log(top, left, width, height, '--->>> onHandleResize');
  }

  function onHandleOk() {
    console.log('onOk callback');
  }

  function onHandleCancel() {
    console.log('onCancel callback');
    setOpen(false);
  }
  function onStageChange({ state }) {
    console.log(state);
  }

  const [action, setAction] = useState('');

  const [openEmailEditor, setOpenEmailEditor] = useState(false);
  const [fromEmail, setFromEmail] = useState('');
  const [ReferEmailMsg, setReferEmailMsg] = useState('');
  const onOpenEditor = (emailOrigin, action) => {
    const { replyToEmail: email_addr, content } = emailOrigin;
    setOpenEmailEditor(true);
    setFromEmail(email_addr);
    setReferEmailMsg(emailOrigin);
    setAction(action);
    setOpen(false);
  };

  return (
    <>
      <Modal
        visible={open}
        keyboard={false}
        draggable
        resizable
        mask={false}
        maskClosable={false}
        // theme='dark'
        // className={'!border !border-solid !border-indigo-500 rounded !p-2' }
        className='rounded-t rounded-b-none border border-solid border-indigo-300 shadow-heavy '
        titleBarClassName='bg-neutral-100 rounded rounded-b-none border-none p-3 font-bold text-slate-600'
        contentClassName='p-2'
        footerClassName='p-2'
        zIndex={2}
        initialWidth={680}
        initialHeight={600}
        initialTop={74}
        initialLeft={window.innerWidth - 700}
        // left={initialPosition.left}
        // top={initialPosition.top}
        // width={initialSize.width}
        // height={initialSize.height}
        // title={`${reference ? '回复: ' : '写邮件: '} ${fromEmail || ''}`}
        title={emailOrigin.subject}
        minimizeButton={<></>}
        onMove={onHandleMove}
        onResize={onHandleResize}
        onCancel={onHandleCancel}
        // onOk={onHandleOk}
        onStageChange={onStageChange}
        footer={null}>
        {/* email toolbar */}
        <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
          {/* <div className='flex items-center justify-start '>
            <Button size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
              回复
            </Button>
          </div> */}
          <div className=' font-bold'>{emailOrigin.subject}</div>
          <div>
            <div className='flex justify-between'>
              <div className='flex gap-2 mb-2 items-center'>
                <Avatar className='' style={TagColorStyle(emailOrigin.fromEmail)}>
                  {(emailOrigin.fromName || '').substring(0, 1)}
                </Avatar>
                <span className=' font-bold text-base'>{emailOrigin.fromName}</span>
                <span className='text-neutral-600'>&lt;{emailOrigin.fromEmail}&gt;</span>
              </div>
              <div className='flex flex-col justify-start gap-1 items-end'>
                <div className='flex items-center  '>
                  <Button onClick={() => onOpenEditor(emailOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
                    回复
                  </Button>
                  <Button onClick={() => onOpenEditor(emailOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
                    转发
                  </Button>
                </div>
                {/* <div>{emailDetail.dateText}</div> */}
                <div className='text-xs '>{emailDetail.localDate}</div>
              </div>
            </div>
            <div className='text-sm'>
              <span className='text-neutral-500 pr-2'>收件人:</span>
              {emailOrigin.toName}
              <span className='text-neutral-600'>&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;</span>
            </div>
            {emailOrigin.cc && (
              <div className='text-sm'>
                <span className='text-neutral-500 pr-2'>抄送:</span>
                {emailOrigin.cc}
              </div>
            )}
            {emailOrigin.bcc && (
              <div className='text-sm'>
                <span className='text-neutral-500 pr-2'>密送:</span>
                {emailOrigin.bcc}
              </div>
            )}
            {/* <div className='text-sm'>
              <span className='text-neutral-500 pr-2'>主题:</span>
              {emailOrigin.subject}
            </div> */}
            <Divider className='my-2' />
            {/* <div className='mt-2'>{emailOrigin.body}</div> */}
            <div className='mt-2' dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
            {/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
          </div>
        </div>
      </Modal>
      <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} quote={ReferEmailMsg} initial={{...initialPosition, ...initialSize}} action={action} key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}/>
    </>
  );
};
export default EmailDetail;