import { useState } from 'react';
import { Button, Flex } from 'antd';
import 'react-quill/dist/quill.snow.css';
import EmailEditor from './EmailEditor';
import { WABIcon } from '@/components/Icons';
import EmailEditorPopup from './EmailEditorPopup';
import EmailEditorPopup2 from './EmailEditorPopup1';

const EmailComposer = ({ ...props }) => {
  const [open, setOpen] = useState(false);
  const [fromEmail, setFromEmail] = useState('');
  const openEditor = (email_addr, i) => {
    setOpen(true);
    setFromEmail(email_addr);
  };
  return (
    <Flex gap={8} className='p-2 bg-gray-200 justify-end rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>
      {[
        { email: 'lyt@hainatravel.com', name: 'LYT' },
        { email: 'lot@hainatravel.com', name: 'LOT' },
      ].map(({ email, name }, i) => (
        <Button
          key={email}
          type='primary'
          className='bg-indigo-500 shadow shadow-indigo-300 hover:!bg-indigo-400 active:bg-indigo-400 focus:bg-indigo-400'
          onClick={() => openEditor(email, i)}>
          {name}&nbsp;&lt;{email}&gt;
        </Button>
      ))}
      {/* <EmailEditor {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor'} /> */}
      <EmailEditorPopup {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor-popup'}/>
      {/* <EmailEditorPopup2 {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor-popup2'} /> */}
    </Flex>
  );
};
export default EmailComposer;