'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 { ExitFullScreenIcon, FullScreenIcon } from '@/assets/common';

export default function CharacterChat() {
  const [settingOpen, setSettingOpen] = useAtom(settingOpenAtom);
  console.log('settingOpen', settingOpen);

  return (
    <div
      style={{
        background:
          'linear-gradient(0deg, rgba(23, 0, 18, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%)',
      }}
      className="relative flex h-full w-full justify-center overflow-hidden"
    >
      <Main />

      {/* 左侧 */}
      <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>
    </div>
  );
}