import NavBarNormal from "@/components/NavBarNormal/index";
import { View } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";

import IconVoiceColor from "@/components/icon/icon-voice-color";
import TabBarButtons from "@/components/wemeta-tabs/TabBarButtons";
import WemetaTabs from "@/components/wemeta-tabs/index";
import CardList from "@/components/list/card-list";
import CardListItem from "@/components/list/card-list-item";
import IconIdeaColor from "@/components/icon/icon-idea-color";
import IconPageColor from "@/components/icon/icon-page-color";

import WemetaSwitch from "@/components/WemetaSwitch";
import { useState } from "react";
import IconArrow from "@/components/icon/icon-arrow";

import Popup from "@/components/popup/popup";
import PopupSheets from "@/components/popup/popup-sheets";

export default function Index() {
  const [tabIndex, setTabIndex] = useState("1");

  const handleTabIndexChange = (index: string) => {
    setTabIndex(index);
  };

  const tabList = [
    {
      key: "1",
      label: "智能体",
    },
    {
      key: "2",
      label: "微官网",
    },
  ];

  const [checked, setChecked] = useState(false);
  const handleSwitchChange = (checked: boolean) => {
    setChecked(checked);
    // onSwitchChanged && onSwitchChanged(checked);
  };


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

  const IconArrowRight = () => {
    return (
      <View className="flex items-center">
        <IconArrow />
      </View>
    );
  };

  const dataLibTabList = [
    {
      key: "1",
      label: "个人知识",
      children: <>
        <View>
          hello
        </View>
      </>
    },
    {
      key: "2",
      label: "企业知识",
      children: <>
        <View>
          world
        </View>
      </>
    },
  ];

  return (
    <PageCustom>
      <NavBarNormal>创建</NavBarNormal>
      <View className="px-16 w-full flex flex-col gap-20">
        <View className="w-full">
          <TabBarButtons
            current={tabIndex}
            list={tabList}
            onTabIndexChange={handleTabIndexChange}
          ></TabBarButtons>
        </View>

        <CardList>
          <CardListItem
            className="pl-16 pr-8"
            underline
            rightRenderer={IconArrowRight}
            leftRenderer={IconVoiceColor}
          >
            <View className="text-14 py-18 font-medium leading-22">声音</View>
          </CardListItem>

          <CardListItem
            className="pl-16 pr-8"
            rightRenderer={IconArrowRight}
            leftRenderer={IconIdeaColor}
          >
            <View className="text-14 py-18 font-medium leading-22">
              开场提问引导
            </View>
          </CardListItem>
        </CardList>
        <View className="pt-20">
          <CardList>
            <CardListItem
              className="pl-16 pr-8"
              leftRenderer={IconPageColor}
              rightRenderer={IconArrowRight}
            >
              <View className="text-14 py-18 font-medium leading-22">
                知识库
              </View>
            </CardListItem>
            <View className="">
              <View className="flex flex-col gap-12 px-16 pb-16">
                <View className="flex rounded-8 p-16 gap-16 bg-gray-3">
                  <View className="flex-1">
                    <View className="text-14 font-medium leading-22 text-black pb-2">
                      个人知识
                    </View>
                    <View className="text-12 leading-20 text-gray-4">
                      使用你上传的内容（如文档、链接等）作为智能体回答的知识基础。
                    </View>
                  </View>

                  <View className="flex-center">
                    <WemetaSwitch
                      checked={checked}
                      onChange={(checked) => handleSwitchChange(checked)}
                    ></WemetaSwitch>
                  </View>
                </View>

                <View className="flex rounded-8 p-16 bg-gray-3">
                  <View className="flex-1">
                    <View className="text-14 font-medium leading-22 text-black pb-2">
                      杭州茗视光眼科医院
                    </View>
                    <View className="text-12 leading-20 text-gray-4">
                      引用企业统一配置的知识库内容，如用于支持专业、统一的客户沟通。
                    </View>
                  </View>

                  <View className="flex-center">
                    <WemetaSwitch
                      checked={checked}
                      onChange={(checked) => handleSwitchChange(checked)}
                    ></WemetaSwitch>
                  </View>
                </View>
              </View>
            </View>
          </CardList>
        </View>

        <View className="pt-20">
          <CardList>
            <View className="py-16 px-20 flex flex-col gap-20">
              <CardListItem underline arrow>
                <View className="flex items-center font-normal pb-16">
                  <View className="flex-1 font-normal">姓名</View>
                  <View className="text-gray-5 mr-8">张三</View>
                </View>
              </CardListItem>
              <CardListItem underline arrow>
                <View className="flex items-center font-normal pb-16">
                  <View className="flex-1 font-normal">手机号码</View>
                  <View className="text-gray-5 mr-8">137 1234 1234</View>
                </View>
              </CardListItem>
              <CardListItem underline arrow>
                <View className="flex items-center font-normal pb-16">
                  <View className="flex-1 font-normal">联系邮箱</View>
                  <View className="text-gray-5 mr-8 truncate max-w-[188px]">zhangsan@eyeclear.com</View>
                </View>
              </CardListItem>
              <CardListItem underline arrow>
                <View className="flex items-center font-normal pb-16">
                  <View className="flex-1 font-normal">联系地址</View>
                  <View className="text-gray-5 mr-8 truncate max-w-[188px]">浙江省杭州市上城区钱江国际时代广场2幢</View>
                </View>
              </CardListItem>
            </View>
          </CardList>
        </View>

        <View className="button-rounded-big" onClick={()=> setShowPopup(true)}>拉起弹层</View>

        {/* <Popup setShow={setShowPopup} show={showPopup} title="知识库-图片/视频">
          <View>你好啊世界</View>
          <WemetaTabs current="1" list={dataLibTabList}>

          </WemetaTabs>
        </Popup> */}

        <PopupSheets
          setShow={setShowPopup}
          show={showPopup}
          content={[
            {item: <View className="text-12 font-normal text-gray-4">推荐知识库导入，可自动解析内容并提取知识</View>},
            {item: '从知识库导入', type: 'primary', onClick: ()=> {console.log(111)}},
            {item:'手动添加', onClick: ()=> {console.log(22)}},
            {item:'删除', type: 'warn', onClick: ()=> {console.log(333)}},
          ]}
        >
        </PopupSheets>

      </View>
    </PageCustom>
  );
}