'use client';

import Input from './input';
import Actions from './actions';
import ChatList from './ChatList';
import { useAtom } from 'jotai';
import { settingOpenAtom } from '../atoms';
import SettingForm from './Right';
import { Drawer } from '@/components';
import Left from './Left';
import { ExitFullScreenIcon, FullScreenIcon } from '@/assets/common';
import { cn } from '@/lib';

export default function Main() {
  const [settingOpen, setSettingOpen] = useAtom(settingOpenAtom);

  return (
    <>
      {/* main  */}
      <div className="flex h-full w-[calc(100vw-900px)] flex-col px-10">
        {/* chat list */}
        <ChatList />

        {/* actions */}
        <Actions />

        {/* inputs */}
        <Input />
      </div>

      {/* 左侧 */}
      <Drawer open={settingOpen} position="left" width={448} destroyOnClose>
        <Left />
      </Drawer>

      {/* 右侧设置 */}
      <Drawer open={settingOpen} position="right" width={448} destroyOnClose>
        <SettingForm />
      </Drawer>

      {/* 设置按钮 */}
      <div
        className={cn(
          'absolute top-8 right-10 h-10 w-10 select-none hover:cursor-pointer',
          'text-text-color/10 hover:text-text-color/20'
        )}
        onClick={() => setSettingOpen(!settingOpen)}
      >
        {settingOpen ? <FullScreenIcon /> : <ExitFullScreenIcon />}
      </div>
    </>
  );
}