import darkcd from '@/assets/dark/application-two.png';
import darkdz2 from '@/assets/dark/bad-two.png';
import darkfz from '@/assets/dark/bring-to-front.png';
import dxDarkLogo from '@/assets/dark/dx.png';
import darkdz from '@/assets/dark/good-two.png';
import darkLogo from '@/assets/dark/logo.png';
import sendIcon from '@/assets/home/send.png';
import taiyang from '@/assets/home/taiyang.svg';
import upIcon from '@/assets/home/up.png';
import userLogo from '@/assets/home/user.png';
import yueliang from '@/assets/home/yueliang.svg';
import lightcd from '@/assets/light/application-two.png';
import lightdz2 from '@/assets/light/bad-two.png';
import lightfz from '@/assets/light/bring-to-front.png';
import dxLightLogo from '@/assets/light/dx.png';
import lightdz from '@/assets/light/good-two.png';
import lightLogo from '@/assets/light/logo.png';
import { getUuid } from '@/utils';
import {
  ConfigProvider,
  Dropdown,
  Image,
  Input,
  MenuProps,
  message,
  Switch,
} from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import { menuList } from './data';
import styles from './index.less';

const { TextArea } = Input;

const list = [
  {
    id: 1,
    label: '对话内容1对话内容1对话内容1',
    list: [
      {
        text: '对话内容1',
        return:
          '"标题：学习宣传贯彻党的二十大精神丨上海公司召开党外代表人士学习宣传贯彻党的二十大精神座谈交流会\n\n正文：\n\n近日，上海公司召开党外代表人士学习宣传贯彻党的二十大精神座谈交流会，各民主党派、无党派人士及党群部相关人员通过现场及视频的方式参加会议。本次座谈会旨在凝聚党外人士思想共识，充分发挥党外人士智力优势，为推进企业高质量发展汇聚强大合力。\n\n学深悟透，做到知行合一\n\n会议专题解读了中共二十大报告和中央统战会议精神，使党外人士深刻认识统战工作的重要性，引导党外人士用中共二十大精神武装思想、指导实践。大家一致表示，中共二十大报告主题鲜明、气势磅礴、思想深邃、内涵丰富，是一篇闪耀着马克思主义真理光芒的纲领性文献。要学习好，领会好，贯彻好中共二十大精神，深刻领悟两个确立的决定性意义，进一步增强四个意识、坚定四个自信、做到两个维护。同时，聚焦企业高质量发展，关注民生、城市数字化转型和未来产业发展，以数字中国建设为己任，加强云改数转战略的落地实践，加快推进服务领先和企业高质量发展。\n\n建言献策，认真履职担当\n\n会上，上海公司党外人士分享了党外履职尽责情况，并对公司统战和改革发展等工作提出了意见建议。大家纷纷表示：要深入学习宣传贯彻中共二十大报告和中央统战会议精神，充分发挥党外人士独特优势和桥梁纽带作用，为公司高质量发展出谋划策、贡献力量。围绕加强数字中国建设推进中国式现代化，集团首家党外代表人士建言献策工作室负责人XXX表示：要将中共二十大精神贯彻落实到科技创新和科技惠民的具体实践中，凝聚工作室成员合力加强课题研究，践行云改数转，助力上海五大新城数字化转型发展。与会代表提出，要通过参与上海市产业和数字化转型十四五规划汇编、开展老人数字驿站等主题公益活动、提出用数字化手段赋能基层治理工作等建议，为新形势下宣传电信品牌，为推动业务发展牵线搭桥、贡献力量。\n\n坚定信心，投身改革发展\n\n会议最后，领导XXX对党外人士积极投身公司高质量发展提出三方面要求：一是坚持高目标牵引。坚持以客户为中心，从满足人民的需求出发，立足岗位充分探索AI、5G、大数据、云计算等发展潜力，不断加强关键数字技术创新，将新主业作为增收引擎，保持一定的速度，推动公司高质量转型发展。二是积极投身并支持深化改革。主动转变思想，跳出舒适区，积极变革抢占行业头部区域；从能力上转变，发挥传帮带作用，主动学习新业务、新知识，提升云改数转能力；从作风上转变，下沉一线做好支撑，相信变革的力量，弘扬主旋律，传递正能量。三是发挥优势传播企业美誉度，展示良好形象，打造市民信息化服务的第一联想品牌。"',
      },
    ],
  },
  {
    id: 2,
    label: '对话内容2',
    list: [
      {
        text: '对话内容2',
        return: '对话内容2',
      },
    ],
  },
  {
    id: 3,
    label: '对话内容3',
    list: [
      {
        text: '对话内容3',
        return: '对话内容3',
      },
    ],
  },
  {
    id: 4,
    label: '对话内容4',
    list: [
      {
        text: '对话内容4',
        return: '对话内容4',
      },
    ],
  },
  {
    id: 5,
    label: '对话内容5',
    list: [
      {
        text: '对话内容5',
        return:
          '标题：学习宣传贯彻党的二十大精神丨上海公司召开党外代表人士学习宣传贯彻党的二十大精神座谈交流会\n\n正文：\n\n近日，上海公司召开党外代表人士学习宣传贯彻党的二十大精神座谈交流会，各民主党派、无党派人士及党群部相关人员通过现场及视频的方式参加会议。本次座谈会旨在凝聚党外人士思想共识，充分发挥党外人士智力优势，为推进企业高质量发展汇聚强大合力。\n\n学深悟透，做到知行合一\n\n会议专题解读了中共二十大报告和中央统战会议精神，使党外人士深刻认识统战工作的重要性，引导党外人士用中共二十大精神武装思想、指导实践。大家一致表示，中共二十大报告主题鲜明、气势磅礴、思想深邃、内涵丰富，是一篇闪耀着马克思主义真理光芒的纲领性文献。要学习好，领会好，贯彻好中共二十大精神，深刻领悟两个确立的决定性意义，进一步增强四个意识、坚定四个自信、做到两个维护。同时，聚焦企业高质量发展，关注民生、城市数字化转型和未来产业发展，以数字中国建设为己任，加强云改数转战略的落地实践，加快推进服务领先和企业高质量发展。\n\n建言献策，认真履职担当\n\n会上，上海公司党外人士分享了党外履职尽责情况，并对公司统战和改革发展等工作提出了意见建议。大家纷纷表示：要深入学习宣传贯彻中共二十大报告和中央统战会议精神，充分发挥党外人士独特优势和桥梁纽带作用，为公司高质量发展出谋划策、贡献力量。围绕加强数字中国建设推进中国式现代化，集团首家党外代表人士建言献策工作室负责人XXX表示：要将中共二十大精神贯彻落实到科技创新和科技惠民的具体实践中，凝聚工作室成员合力加强课题研究，践行云改数转，助力上海五大新城数字化转型发展。与会代表提出，要通过参与上海市产业和数字化转型十四五规划汇编、开展老人数字驿站等主题公益活动、提出用数字化手段赋能基层治理工作等建议，为新形势下宣传电信品牌，为推动业务发展牵线搭桥、贡献力量。\n\n坚定信心，投身改革发展\n\n会议最后，领导XXX对党外人士积极投身公司高质量发展提出三方面要求：一是坚持高目标牵引。坚持以客户为中心，从满足人民的需求出发，立足岗位充分探索AI、5G、大数据、云计算等发展潜力，不断加强关键数字技术创新，将新主业作为增收引擎，保持一定的速度，推动公司高质量转型发展。二是积极投身并支持深化改革。主动转变思想，跳出舒适区，积极变革抢占行业头部区域；从能力上转变，发挥传帮带作用，主动学习新业务、新知识，提升云改数转能力；从作风上转变，下沉一线做好支撑，相信变革的力量，弘扬主旋律，传递正能量。三是发挥优势传播企业美誉度，展示良好形象，打造市民信息化服务的第一联想品牌。',
      },
    ],
  },
];

const typeList = [
  {
    id: 1,
    name: '日常对话',
  },
  {
    id: 2,
    name: '公文撰写',
  },
];

const Home: React.FC = () => {
  const [hisDialogList, setHisDialogList] = useState<any[]>(list);
  const [content, setContent] = useState<string>();
  const [active, setActive] = useState<number>(2);
  const [type, setType] = useState<any>(typeList[1]);
  const [dialogActive, setDialogActive] = useState<number>(5);
  const [mode, setMode] = useState<'dark' | 'light'>();
  const [typeDisabled, setTypeDisabled] = useState<boolean>(false); // 对话类型是否可以切换

  const onChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    console.log(e);
    setContent(e.target.value);
  };

  const items: MenuProps['items'] = typeList.map((item) => {
    return {
      label: (
        <div
          onClick={() => {
            setType(item);
          }}
        >
          {item.name}
        </div>
      ),
      key: item.id,
    };
  });

  // 表头筛选
  const dialogContent = useMemo(() => {
    return hisDialogList.find((i: any) => i.id === dialogActive) || {};
  }, [dialogActive, hisDialogList]);

  /**
   * 获取公文写稿的搜索结果
   */
  const getSpecialtySearchValue = async () => {
    // 公文写稿api：http://136.6.202.47:8888/ai/aiFactoryServer/v1/apis/1/nlp-llm-digital-cq-baichuan2-service:1.0@alpha.fixed/LLM4Writing
    const resp = await fetch(
      `http://136.6.202.47:8888/ai/aiFactoryServer/v1/apis/1/nlp-llm-digital-cq-baichuan2-service:1.0@alpha.fixed/LLM4Writing`,
      {
        method: 'post',
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: JSON.stringify({
          text_list_json: [
            {
              text_id: getUuid(),
              text: '主题：上海公司召开党外代表人士学习宣传贯彻党的二十大精神座谈交流会\n时间： 近日\n核心事件：\n- 会议专题解读中共二十大报告和中央统战会议精神， 使党外人士深刻认识统战工作的重要性， 并引导他们用中共二十大精神武装思想、 指导实践。\n- 上海公司党外人士分享了党外履职尽责情况， 并对公司的统战和改革发展等工作提出了意见建议。\n- XXX领导对党外人士积极投身公司高质量发展提出了三方面要求， 包括坚持高目标牵引、 积极投身并支持深化改革、 发挥优势传播企业美誉度。\n- 字数要求： 1000 字 ',
            },
          ],
        }),
      },
    ).catch((error) => {
      console.error(error);
    });
    const result = await resp?.json();
    console.log('result', result);
  };

  /**
   * 获取闲聊的搜索结果
   */
  const getLeisureSearchValue = async () => {
    // 闲聊api：http://136.6.202.47:8888/ai/aiFactoryServer/v1/apis/1/nlp-llm-digital-cq-baichuan2-service:1.0@alpha.fixed/LLM4Chat
    const resp = await fetch(
      `http://136.6.202.47:8888/ai/aiFactoryServer/v1/apis/1/nlp-llm-digital-cq-chat-service:1.0@alpha.fixed`,
      {
        method: 'post',
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: JSON.stringify({
          text_list_json: [
            {
              text_id: getUuid(),
              text: '什么是数字重庆？',
              history: [
                {
                  text: '你好',
                  role: '用户',
                  time: '2023-10-07 17:48:03',
                },
                {
                  text: '你好！',
                  role: '聊天机器人',
                  time: '2023-10-07 17:48:10',
                },
              ],
            },
          ],
        }),
      },
    ).catch((error) => {
      console.error(error);
    });
    const result = await resp?.json();
    console.log('result', result);
  };

  const send = () => {
    if (type?.id === 2) {
      getSpecialtySearchValue();
    } else {
      getLeisureSearchValue();
    }
  };

  const switchModeHandler = (value: 'dark' | 'light') => {
    const doc = document.querySelector('body');
    if (doc) {
      doc.removeAttribute('class');
      doc.classList.add(value);
      setMode(value);
    }
  };
  /**
   * 风格切换
   */
  const onChangeStyle = (checked: boolean) => {
    if (checked) {
      switchModeHandler('light');
    } else {
      switchModeHandler('dark');
    }
  };

  /**
   * 复制到粘贴板
   */
  const onCopy = (value: string) => {
    navigator?.clipboard
      ?.writeText(value)
      ?.then(() => {
        message.info('复制成功！');
      })
      ?.catch(() => {
        message.info('复制失败！');
      });
  };

  useEffect(() => {
    switchModeHandler('light');
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.sidebar}>
        <img
          className={styles.logo}
          src={mode === 'dark' ? darkLogo : lightLogo}
        />
        <div className={styles.addBtn}>新建对话</div>
        <ConfigProvider
          theme={{
            token: {
              lineWidth: 0,
              controlOutlineWidth: 0,
              fontSize: 16,
              colorBgContainer: 'transparent',
              colorPrimaryActive: 'transparent',
              colorPrimaryHover: 'transparent',
              colorText: mode === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.88)',
              colorTextPlaceholder:
                mode === 'dark'
                  ? 'rgba(255,255,255,.52)'
                  : 'rgba(0, 0, 0, 0.20)',
            },
            components: {
              Input: {
                activeBorderColor: 'transparent',
                hoverBorderColor: 'transparent',
                addonBg: 'transparent',
              },
            },
          }}
        >
          <Input
            addonBefore={<div className={styles.searchIcon} />}
            placeholder="历史搜索记录"
            style={{ borderBottom: '1px solid var(--search-borderColor)' }}
          />
        </ConfigProvider>
        <div className={styles.listBox}>
          {hisDialogList.map((item: any) => (
            <div
              key={item.id}
              className={classNames(
                styles.siderItem,
                dialogActive === item.id ? styles.active : '',
              )}
            >
              <div className={styles.con}>{item.label}</div>
              <div
                className={styles.editIcon}
                onClick={() => {
                  setDialogActive(item.id);
                }}
              />
              <div
                className={styles.delIcon}
                onClick={() => {
                  setHisDialogList(
                    hisDialogList.filter((i) => i.id !== item.id),
                  );
                }}
              />
            </div>
          ))}
        </div>
      </div>
      <div className={styles.rightContent}>
        <div className={styles.content}>
          {dialogContent?.list?.map((item: any, index: number) => (
            <div key={index} className={styles.dialogItem}>
              <div className={styles.dialogText}>
                <div className={styles.textIcon}>
                  <img src={userLogo} />
                </div>
                <div className={styles.text}>{item.text}</div>
              </div>
              <div className={styles.dialogReturn}>
                <div className={styles.returnIcon}>
                  <img src={mode === 'dark' ? dxDarkLogo : dxLightLogo} />
                </div>
                <div className={styles.return}>
                  <div className={styles.returnText}>
                    AA
                    {item.return
                      .split('\n\n')
                      .map((item: any, index: number) => {
                        return (
                          <p key={index}>
                            {item}
                            <br />
                          </p>
                        );
                      })}
                  </div>
                  <div className={styles.returnBtn}>
                    <img src={mode === 'dark' ? darkdz : lightdz} />
                    <img
                      title="复制到粘贴板"
                      src={mode === 'dark' ? darkfz : lightfz}
                      onClick={() => {
                        onCopy(item.return);
                      }}
                    />
                    <img src={mode === 'dark' ? darkdz2 : lightdz2} />
                    <img src={mode === 'dark' ? darkcd : lightcd} />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className={styles.footer}>
          <div className={styles.footerMenu}>
            <div className={styles.menuBox}>
              {menuList.map((item: any) => (
                <div
                  key={item.id}
                  className={classNames(
                    styles.menu,
                    active === item.id ? styles.active : '',
                  )}
                  onClick={() => {
                    setActive(item.id);
                  }}
                >
                  <div className={styles.name}>{item.name}</div>
                  <div className={styles.icon}>
                    {mode === 'dark' ? (
                      <img
                        src={
                          active === item.id
                            ? item.darkIconActive
                            : item.darkIcon
                        }
                      />
                    ) : (
                      <img
                        src={
                          active === item.id
                            ? item.lightIconActive
                            : item.lightIcon
                        }
                      />
                    )}
                  </div>
                </div>
              ))}
            </div>
            <ConfigProvider
              theme={{
                token: {
                  controlItemBgActive: mode === 'dark' ? '#31323E' : '#D7EAFF',
                  controlItemBgActiveHover:
                    mode === 'dark' ? '#31323E' : '#D7EAFF',
                  controlItemBgHover: mode === 'dark' ? '#31323E' : '#D7EAFF',
                  colorText: mode === 'dark' ? '#616161' : '#A4B5D0',
                  colorBgElevated: mode === 'dark' ? '#1E1E26' : '#fff',
                  boxShadowSecondary:
                    mode === 'dark'
                      ? '0px 0px 20px 0px #15161B'
                      : '0px 0px 16px 0px #CBE7FF',
                },
              }}
            >
              <Dropdown
                menu={{ items }}
                disabled={typeDisabled}
                placement="topRight"
              >
                <div className={styles.type}>
                  <span>{type?.name}</span>
                  <img src={upIcon} />
                </div>
              </Dropdown>
            </ConfigProvider>
          </div>
          <ConfigProvider
            theme={{
              token: {
                colorText: mode === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.88)',
                colorTextPlaceholder: mode === 'dark' ? '#999AAA' : '#C6CFDB',
                colorBgContainer: 'transparent',
              },
            }}
          >
            <TextArea
              placeholder="请输入问题或“”获取收藏指令，可通过shift+ 回车换行"
              allowClear
              onChange={onChange}
              value={content}
              autoSize={{ minRows: 3, maxRows: 15 }}
              style={{
                paddingBottom: '10px',
                borderColor: mode === 'dark' ? '#727491' : 'transparent',
                background: mode === 'dark' ? '#31323E' : '#fff',
                boxShadow:
                  mode === 'dark'
                    ? 'none'
                    : '0px 0px 16px 0px rgba(203, 231, 255, 0.60)',
                borderRadius: '12px',
                padding: '12px 12px 54px 12px',
              }}
            />
          </ConfigProvider>
          <div className={styles.send} onClick={send}>
            <span>发送</span>
            <img src={sendIcon} />
          </div>
        </div>
      </div>
      <Switch
        className={styles.switchStyle}
        onChange={onChangeStyle}
        checkedChildren={<Image src={taiyang} width={15} />}
        unCheckedChildren={<Image src={yueliang} width={15} />}
        defaultChecked
      />
    </div>
  );
};

export default Home;
