'use client';

import { useChatStore } from '../../store';
import { cn } from '@/lib';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { Icon } from '@/components';
import IconFont from '@/components/ui/iconFont';
import ArchiveHistory from './ArchiveHistory';
import Info from './info';

export default function Side() {
  const activeKey = useChatStore((state) => state.leftTabActiveKey);
  const setActiveKey = useChatStore((state) => state.setLeftTabActiveKey);
  const setHistoryListOpen = useChatStore((state) => state.setHistoryListOpen);
  const Component = activeKey === 'info' ? Info : ArchiveHistory;
  const router = useRouter();

  const tabs = [
    {
      render: (isActive: boolean) => (
        <div
          className={cn(
            'h-10 w-10 overflow-hidden rounded-full border-2',
            isActive ? 'border-blue-500' : 'border-white/80'
          )}
        >
          <Image src="/avator.png" alt="info" width={40} height={40} />
        </div>
      ),
      key: 'info',
    },
    {
      render: (isActive: boolean) => (
        <div
          className={cn(
            'h-10 w-10',
            isActive ? 'text-white' : 'text-white/60 hover:text-white/80'
          )}
        >
          <IconFont type="icon-jiaoselishi" size={40} />
        </div>
      ),
      key: 'history',
    },
  ];

  const bottomActions = [
    {
      element: (
        <div onClick={() => setHistoryListOpen(true)}>
          <Icon
            size={40}
            src="/character/history_list.svg"
            hoverSrc="/character/history_list_hover.svg"
          />
        </div>
      ),
    },
    {
      type: 'devider',
    },
    {
      element: (
        <div
          onClick={() => router.back()}
          className="flex-center h-10 w-10 cursor-pointer rounded-full border-1 border-white/30 hover:border-white/60"
        >
          <IconFont type="icon-fanhui" size={18} />
        </div>
      ),
    },
  ];

  return (
    <>
      {/* 左侧路由Bar */}
      <div className="flex h-full w-25 flex-col justify-between bg-black/20">
        <div className="flex flex-col gap-9 pt-7.5">
          {tabs.map((item) => {
            const isActive = activeKey === item.key;
            return (
              <div
                className={cn(
                  'flex h-10 cursor-pointer justify-end border-r-[2px] pr-4.5',
                  isActive ? 'border-blue-500' : 'border-transparent'
                )}
                onClick={() => setActiveKey(item.key as any)}
                key={item.key}
              >
                {item.render(isActive)}
              </div>
            );
          })}
        </div>
        <div className="mb-10 flex flex-col gap-7.5">
          {bottomActions.map((item, index) => {
            if (item.element) {
              return (
                <div
                  className="flex h-10 justify-end pr-5"
                  key={`item_${index}`}
                >
                  {item.element}
                </div>
              );
            }
            // divider
            return (
              <div
                className="ml-12 h-0.5 w-5 bg-[rgba(44,42,49,1)]"
                key={`divider_${index}`}
              ></div>
            );
          })}
        </div>
      </div>

      {/* 路由content */}
      <div className="flex-1">
        <Component />
      </div>
    </>
  );
}
