import { Children, createContext, useEffect, useState } from 'react';
import { Tabs } from 'antd';
import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
import InputComposer from './Input/InputComposer';
import EmailComposer from './Input/EmailChannelTab';
import { WABIcon } from '@/components/Icons';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';

const DEFAULT_CHANNEL = 'waba';

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

  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;
    setActiveChannel(thisLastChannel);
    return () => {};
  }, [activeMessages]);

  const replyTypes = [
    { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
    { key: 'email', label: 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
    { key: 'whatsapp', label: 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
  ];

  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;