'use client';

import { cn } from '@/lib';
import SettingForm from './Right';
import { useAtom } from 'jotai';
import { settingOpenAtom } from './atoms';
import Main from './Main';
import Left from './Left';
import { Drawer } from '@/components';
import './index.css';
import { useRef } from 'react';
import { ExitFullScreenIcon, FullScreenIcon } from '@/assets/common';

export default function CharacterChat() {
  const [settingOpen, setSettingOpen] = useAtom(settingOpenAtom);
  const container = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={container}
      className="relative flex h-full w-full justify-center overflow-hidden"
    >
      <Main />
      {/* 设置按钮 */}
      <div
        className={cn(
          'absolute top-8 right-10 z-[1201] 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>
      {/* 左侧 */}
      <Drawer
        open={settingOpen}
        position="left"
        width={448}
        destroyOnClose
        getContainer={() => container.current}
      >
        <Left />
      </Drawer>
      {/* 右侧设置 */}
      <Drawer
        open={settingOpen}
        position="right"
        width={448}
        destroyOnClose
        getContainer={() => container.current}
      >
        <SettingForm />
      </Drawer>
    </div>
  );
}