import { Text, View } from "@tarojs/components";

import IconPlusBig from "@/components/icon/icon-plus-big";

import Popup from "@/components/popup/popup";
import { useState } from "react";

import ScrollListChat from "./components/ScrollListChat";
import ScrollList from './components/ScrollList';
import WeComQRcode from '@/components/WeComQRcode'

import StyleFilter, {TListStyle} from '../StyleFilter'

const Index = () => {
  const [showAiAsistant, setShowAiAsistant] = useState(false);
  const [listStyle, setListStyle] = useState<TListStyle>("chat");
  const [totalCount, setTotalCount] = useState<number>(0);
  const [assistantOnly, setAssistantOnly] = useState(false);

  const handleShowAsistantTip = () => {
    setShowAiAsistant(true)
  };

  return (
    <>
      <View className="pt-20 pb-20">
        <StyleFilter onlyAssistantButton checked={assistantOnly} setChecked={setAssistantOnly} listStyle={listStyle} setListStyle={setListStyle}>
          <View className="flex-1 text-12 leading-20 text-gray-45">
              共 {totalCount} 个文件
            </View>
        </StyleFilter>
      </View>

      {listStyle === "chat" ? <ScrollListChat setTotalCount={setTotalCount} assistantOnly={assistantOnly} /> : <ScrollList setTotalCount={setTotalCount} />}

      <View
        onClick={handleShowAsistantTip}
        className="fixed right-20 bottom-20 z-[200] w-48 h-48 rounded-full bg-primary flex-center drop-shadow-[0_4px_16px_rgba(49,124,250,0.25)]"
      >
        <IconPlusBig></IconPlusBig>
      </View>

      <Popup title="添加AI小助理的企业微信" setShow={setShowAiAsistant} show={showAiAsistant}>
        <View className="p-20">
          <View className="text-12 leading-24 text-[#414A64]">请将资料发送到我的企业微信，我会自动为你解析内容，并同步到这里。</View>
          <WeComQRcode text="长按二维码添加" />
        </View>
      </Popup>
    </>
  );
};

export default Index;