'use client';

import { IconButton } from '@/components/ui/button';
import Input from './Input';
import MessageList from './MessageList';
import SettingDialog from './Drawer';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function ChatPage() {
  const { id } = useParams();
  const [settingOpen, setSettingOpen] = useState(false);
  const switchToChannel = useStreamChatStore((s) => s.switchToChannel);
  const client = useStreamChatStore((s) => s.client);

  useEffect(() => {
    if (id && client) {
      switchToChannel(id as string);
    }
  }, [id, client]);

  return (
    <div className="flex h-full">
      <div className="relative px-4 w-full flex-1 flex justify-center">
        <div className="max-w-[752px] w-full h-full flex flex-col">
          <MessageList />
          <Input />
        </div>
        <IconButton
          onClick={() => setSettingOpen(!settingOpen)}
          className="absolute top-1 right-1"
          variant="ghost"
          size="small"
        >
          <i className="iconfont-v2 iconv2-zhedie" />
        </IconButton>
      </div>
      <SettingDialog open={settingOpen} onOpenChange={setSettingOpen} />
    </div>
  );
}