import { useState, useEffect } from 'react'
import { Button, ConfigProvider, Dropdown, Flex, Select } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import EmailEditorPopup from './EmailEditorPopup'
import useStyleStore from '@/stores/StyleStore'
import useAuthStore from '@/stores/AuthStore'
// import { isEmpty, } from '@/utils/commons';
import useConversationStore from '@/stores/ConversationStore'
import { useOrderStore } from '@/stores/OrderStore'
import { EditIcon } from '@/components/Icons'

const EmailNewBtn = ({ ...props }) => {
  const [mobile] = useStyleStore((state) => [state.mobile])

  const { userId, username, emailList } = useAuthStore((state) => state.loginUser)
  // const websocketOpened = useConversationStore((state) => state.websocketOpened);
  const currentConversation = useConversationStore((state) => state.currentConversation)
  // const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
  const { orderDetail } = useOrderStore()

  const emailListOption = emailList?.map((ele) => ({ ...ele, label: ele.email, key: ele.email, value: ele.email })) || []

  const [pickEmail, setPickEmail] = useState({})
  const [fromUser, setFromUser] = useState()

  useEffect(() => {
    const order_opi = Number(orderDetail?.opi_sn || userId)
    setFromUser(order_opi)

    const find =
      emailListOption?.find((ele) => ele.opi_sn === order_opi && ele.default === true) ||
      emailListOption?.find((ele) => ele.opi_sn === order_opi && ele.backup === true) ||
      emailListOption?.find((ele) => ele.opi_sn === order_opi) ||
      emailListOption?.find((ele) => ele.default === true) ||
      emailListOption?.find((ele) => ele.backup === true)
    setPickEmail(find)
    return () => {}
  }, [orderDetail])

  const [open, setOpen] = useState(false)
  const [fromEmail, setFromEmail] = useState('')
  const openEditor = (email_addr) => {
    setOpen(true)
    setFromEmail(email_addr)
  }
  return (
    <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
      <Flex gap={8} className='p-2 bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0' align={'center'} justify={'flex-end'}>
        {/* <span>新邮件:</span> */}
        {/* <Dropdown.Button
          // disabled={!talkabled}
          menu={{
            selectable: true,
            items: emailListOption,
            onClick: ({ key }) => {
              const find = emailListOption?.find((ele) => ele.email === key)
              setPickEmail(find)
              // openEditor(key);
            },
            selectedKeys: [pickEmail?.email],
          }}
          // onClick={() => openEditor(pickEmail.key)}
          type='primary'
          className='w-auto'
          icon={<DownOutlined />}>
          <>{pickEmail?.email}</>
        </Dropdown.Button> */}

        {/* <span>切换邮箱:</span>
        <Select
          options={emailListOption}
          labelInValue
          value={pickEmail}
          onChange={(val) => { setPickEmail(val); setFromUser(val.opi_sn)}}
          // variant={'borderless'}
        /> */}
        <Button icon={<EditIcon />} type='primary' onClick={() => openEditor(pickEmail.key)}>
          新邮件
        </Button>
        <EmailEditorPopup {...{ open, setOpen }} fromEmail={fromEmail} fromUser={fromUser} conversationid={currentConversation.sn} key={'email-editor-popup'} />
      </Flex>
    </ConfigProvider>
  )
}
export default EmailNewBtn
