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

import { useState } from 'react';
import { Button, Divider, Avatar } from 'antd';
import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
import { stringToColour } from '@/utils/commons';
import EmailEditorPopup from '../Input/EmailEditorPopup';
import DnDModal from '@/components/DndModal';
import useStyleStore from '@/stores/StyleStore';

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({});
  function onHandleMove(e) {
    const { top, left, width, height } = e;
    setInitialPosition({ top, left });
  }
  function onHandleResize(e) {
    const { top, left, width, height } = e;
    setInitialPosition({ top, left });
    setInitialSize({ width, height });
  }

  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);
  };

  const [mobile] = useStyleStore((state) => [state.mobile]);
  return (
    <>
      <DnDModal
        open={open}
        setOpen={setOpen}
        title={emailOrigin.subject}
        initial={{ top: 74 }}
        onMove={onHandleMove}
        onResize={onHandleResize}
        footer={
          mobile ? (
            <>
              <div className='flex items-center w-full '>
                <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>
            </>
          ) : 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',
                window.innerWidth < 600 ? 'flex-row' : 'flex-row',
              ].join(' ')}>
              <div className='flex gap-2 mb-2 items-center'>
                <Avatar
                  className=''
                  style={TagColorStyle(emailOrigin.fromEmail)}>
                  {(emailOrigin.fromName || '').substring(0, 1)}
                </Avatar>
                <div className=' flex flex-col'>
                  <span className=' font-bold text-base'>
                    {emailOrigin.fromName}
                  </span>
                  <span className='text-neutral-500'>
                    {emailOrigin.fromEmail}
                  </span>
                </div>
              </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>
      </DnDModal>
      <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;