import { View } from "@tarojs/components";
import RoundedLabel from "../RoundedLabel";
import IconFilterFeeds from "@/components/icon/IconFilterFeeds";
import IconFilterBatch from "@/components/icon/IconFilterBatch";
import IconFilterList from "@/components/icon/IconFilterList";

import Popup from "@/components/popup/popup";
import WemetaSwitch from "@/components/WemetaSwitch";
import { useState } from "react";
export type TListStyle = "chat" | "list";
interface IProps {
  listStyle?: TListStyle
  setListStyle: (style: TListStyle)=>void
  children: JSX.Element
  checked?: boolean
  setChecked?: (checked: boolean) => void;
  onlyAssistantButton?: boolean;
}

const Index = ({listStyle = "chat", setListStyle, checked, setChecked,  onlyAssistantButton = false,children}: IProps) => {

  const [showPopup, setShowPopup] = useState(false);


  const handleListStyleChange = (listStyle: TListStyle) => {
    setListStyle(listStyle);
    setShowPopup(false)
  };

  return (
    <>
      <View className="px-16">
        <View className="flex items-center">
          <View className="flex-1 text-12 leading-20 text-gray-4">
            {children}
          </View>
          <View className="flex items-center">
            {listStyle === "chat" ? (
              <RoundedLabel
                onClick={() => setShowPopup(true)}
                text="信息流"
                icon={IconFilterFeeds}
              ></RoundedLabel>
            ) : (
              <>
                {/* <RoundedLabel
                  onClick={() => {
                    console.log("batch");
                  }}
                  text="批量"
                  icon={IconFilterBatch}
                ></RoundedLabel> */}
                <RoundedLabel
                  text="列表"
                  onClick={() => {
                    setShowPopup(true)
                  }}
                  icon={IconFilterList}
                ></RoundedLabel>
              </>
            )}
          </View>
        </View>
      </View>
      <Popup setShow={setShowPopup} show={showPopup} title="展示样式">
        <View
          className={`rounded-card ${
            listStyle === "chat" ? "rounded-card-actived" : ""
          }`}
          onClick={() => {
            handleListStyleChange("chat");
          }}
        >

          <View className={`${onlyAssistantButton ? 'border-bottom1-gray':''} mb-12`}>
            <View className="mb-8 text-14 font-medium leading-22">
              对话信息流
            </View>
            <View className="mb-12 text-12 leading-20 text-gray-4">
              以对话形式展示，模拟自然的对话流程。
            </View>
          </View>
          {onlyAssistantButton && <View className="flex items-center">
            <View className="flex-1 text-14 font-medium leading-22">
              仅显示 AI 助手信息
            </View>
            <WemetaSwitch
              checked={checked}
              onChange={(checked) => setChecked?.(checked)}
            ></WemetaSwitch>
          </View>}
        </View>
        <View
          className={`rounded-card ${
            listStyle === "list" ? "rounded-card-actived" : ""
          }`}
          onClick={() => {
            handleListStyleChange("list");
          }}
        >
          <View className="mb-8 text-14 font-medium leading-22">列表形式</View>
          <View className="mb-12 text-12 leading-20 text-gray-4">
            将知识点以简洁列表呈现，清晰快速地提供信息。
          </View>
        </View>
      </Popup>
    </>
  );

};

export default Index;
