import { Children, createContext, useEffect, useState } from 'react';
import { Dropdown, Space, Tabs } from 'antd';
import { MailFilled, MailOutlined, WhatsAppOutlined, DownOutlined } from '@ant-design/icons';
import InputComposer from './Input/InputComposer';
import EmailNewBtn from './Input/EmailNewBtn';
import { WABIcon } from '@/components/Icons';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
import useStyleStore from '@/stores/StyleStore';
import { isEmpty } from '@/utils/commons';
import { DEFAULT_CHANNEL } from '@/config';

const Wabas = [
  { key: 'Global Highlights', label: 'Global Highlights' },
  { key: 'Global Highlights-Multi', label: 'Global Highlights-Multi' },
];
const Wabas_mapped = Wabas.reduce((acc, cur) => ({...acc, [cur.key]: cur}), {});
/**
 * @ignore
 * 不在此处配置, 在个人档案页面配置
 */
const WABASwitcher = ({ onSelect, }) => {
  const [pickV, setPickV] = useState({}); // review: 全局管理? 后端管理?
  return (
    <Dropdown
    // trigger={['contextMenu', 'hover']}
      selectable
      menu={{
        items: Wabas,
        onClick: ({ key, domEvent, ...x }) => {
          domEvent.stopPropagation();
          setPickV(Wabas_mapped[key]);
          onSelect?.(Wabas_mapped[key]);
        },
      }}>
      <Space>
        {/* <WABIcon /> */}
        {pickV.label || 'WABA'}
        <DownOutlined />
      </Space>
    </Dropdown>
  );
};

const ReplyWrapper = () => {
  const [mobile] = useStyleStore(state => [state.mobile]);

  const [activeChannel, setActiveChannel] = useState(DEFAULT_CHANNEL);
  const onChannelTabsChange = (activeKey) => {
    setActiveChannel(activeKey);
  };

  const [referenceMsg] = useConversationStore((state) => [state.referenceMsg]);
  const activeMessages = useConversationStore(
    useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn] : []))
  );
  useEffect(() => {
    const len = activeMessages.length;
    const thisLastChannel = activeMessages.length > 0 ? activeMessages[len - 1]?.type : DEFAULT_CHANNEL;
    const channel = thisLastChannel === 'email' ? 'email' : DEFAULT_CHANNEL;
    setActiveChannel(channel);
    return () => {};
  }, [activeMessages]);

  useEffect(() => {
    if (!isEmpty(referenceMsg.msg_source)) {
      setActiveChannel((referenceMsg.msg_source).toLowerCase())
    }
    return () => {}
  }, [referenceMsg.msg_source])


  const replyTypes = [
    // { key: 'waba', label: mobile ? '' : (<WABASwitcher />), icon: <WABIcon />, children: <InputComposer channel={'waba'} /> },
    { key: 'waba', label: mobile ? '' : '商业号', icon: <WABIcon />, children: <InputComposer channel={'waba'} /> },
    { key: 'email', label: mobile ? '' : '邮件', icon: <MailOutlined className='text-indigo-500' />, children: <EmailNewBtn /> },
    // { key: 'whatsapp', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
    { key: 'wa', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>正在开发……敬请期待</div> },
    // TODO ⬆️WA未登录，要提示用户到个人页面扫码
  ];

  return (
    <div className='reply-wrapper rounded rounded-b-none emoji bg-white'>
      <Tabs activeKey={activeChannel} onChange={onChannelTabsChange} type={'card'} size={'small'} tabPosition={'bottom'} className='bg-white *:m-0 ' items={replyTypes} />
    </div>
  );
};
export default ReplyWrapper;
