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 [assistantOnly, setAssistantOnly] = useState(false);

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

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

      <View className="px-16  h-full">
        {listStyle === "chat" ? <ScrollListChat assistantOnly={assistantOnly} /> : <ScrollList />}
      </View>

      <View
        onClick={handleShowAsistantTip}
        className="fixed right-20 bottom-20 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>将资料发送到我的企业微信，我会自动为你解析内容，并同步到这里。</View>
          <Text>
            {` · 无限制，图片/文档/链接等多种格式；;
            · 无需小程序，直接在微信内操作；;
            · 智能解析处理，生成高质量的QA集。`}
          </Text>
          <WeComQRcode />
        </View>
      </Popup>
    </View>
  );
};

export default Index;
