'use client';

import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
import { createStyles, useResponsive } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { PropsWithChildren, memo, useEffect, useState } from 'react';

import SafeSpacing from '@/components/SafeSpacing';
import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
import { useChatStore } from '@/store/chat';
import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
import { useGlobalStore } from '@/store/global';
import { systemStatusSelectors } from '@/store/global/selectors';
import {Form, Image} from "antd";
import {EditFilled, EditTwoTone} from "@ant-design/icons";
import TopicListContent from "@/app/(main)/chat/(workspace)/@topic/features/TopicListContent";
import Header from "@/app/(main)/chat/(workspace)/@topic/features/Header";

const useStyles = createStyles(({ css, token }) => ({
  content: css`
    display: flex;
    flex-direction: column;
    height: calc(100% - 64px) !important;
    margin-top: 64px;
    width: 363px !important;
  `,
  drawer: css`
    z-index: 10;
    background: ${token.colorBgLayout};
  `,
  header: css`
    border-block-end: 1px solid ${token.colorBorder};
  `,
  topTitle: css`
    font-size: 18px;
    display: inline-block;
    width: calc(100% - 24px)
  `,
  topEdit: css`
    display: inline-block;
    text-align: center;
    width: 24px;
    height: 24px;
    background-color: #AFC1FF;
    color: #fff;
   `,
}));

const TopicPanel = memo(({ children }: PropsWithChildren) => {
  const { styles } = useStyles();
  const [form] = Form.useForm()
  const { md = true, lg = true } = useResponsive();
  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
    systemStatusSelectors.showChatSideBar(s),
    s.toggleChatSideBar,
  ]);
  const showPortal = useChatStore(chatPortalSelectors.showPortal);

  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));

  const handleExpand = (expand: boolean) => {
    if (isEqual(expand, Boolean(showAgentSettings))) return;
    toggleConfig(expand);
    setCacheExpand(expand);
  };

  useEffect(() => {
    if (lg && cacheExpand) toggleConfig(true);
    if (!lg) toggleConfig(false);
  }, [lg, cacheExpand]);

  return (
    !showPortal && (
      <DraggablePanel
        className={styles.drawer}
        classNames={{
          content: styles.content,
        }}
        expand={showAgentSettings}
        minWidth={CHAT_SIDEBAR_WIDTH}
        mode={md ? 'fixed' : 'float'}
        onExpandChange={handleExpand}
        placement={'right'}
        showHandlerWideArea={false}
      >
        <DraggablePanelContainer
          style={{
            flex: 'none',
            height: '100%',
            maxHeight: '100vh',
            border: "1px solid #ddd",
            minWidth: CHAT_SIDEBAR_WIDTH,
          }}
        >
          <div style={{ padding: '15px 20px'}}>
            <div className={styles.topTitle}>助手角色设定</div>
            <div className={styles.topEdit}><EditFilled /></div>
          </div>
          <div><Image  alt="头像" preview={false} src="/images/zsImage.png" /></div>
          <Form layout="horizontal" colon={false} form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <Form.Item name="name" label="名称">
              <span style={{ width: "18px" }}>Linda</span>
            </Form.Item>
            <Form.Item name="jj" label="简介">
              <span style={{ color: "#999999", fontSize: '13px' }}>这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</span>
            </Form.Item>
            <Form.Item name="rw" label="任务">
              <span style={{ color: "#999999", fontSize: '13px' }}>这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务这是一段任务</span>
            </Form.Item>
          </Form>
          {/*<div style={{ display: 'flex' }}>*/}
          {/*  <div style={{ width: '25%', textAlign: 'right' }}>话题</div>*/}
          {/*  <div style={{ width: '75%', height: 'calc(100vh - 800px)' }}>*/}
              <div>
                <Header />
                <TopicListContent />
              </div>
            {/*</div>*/}
          {/*</div>*/}
          {/*<SafeSpacing />*/}
          {/*{children}*/}
        </DraggablePanelContainer>
      </DraggablePanel>
    )
  );
});

export default TopicPanel;
