import { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";
import WemetaTextarea from "@/components/wemeta-textarea/index";
import WemetaInput from "@/components/wemeta-input/index";
import WemetaButton from "@/components/buttons/WemetaButton";
import FormitemSingleImage from '@/components/Form/FormItemSingleImage'
import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";

import style from "./index.module.less";

import BottomBar from "@/components/BottomBar";
import KnowledgePicker from '@/components/KnowledgePicker'
import { useComponentStore } from "@/store/componentStore";
import { uploadImage } from "@/utils/http";
import { EComponentType, EKnowlegeTypes } from "@/consts/enum";
import { TKnowledgeItem } from "@/types/knowledge";
export default function Index() {

  let currentComponent = useComponentStore((state) => state.currentComponent);
  if(!currentComponent){
    return <></>;
  }

  const { saveComponent } = useComponentStore();
  const loading = useComponentStore((state) => state.loading);
  const data = currentComponent?.data;
  const { link, text, layout, poster } = data;

  const [linkValue, setLinkValue] = useState(link ?? "");
  const [linkText, setLinkText] = useState(text ?? "");
  const [linkPoster, setLinkPoster] = useState<string>(poster ?? "");

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

  // 选择知识库导入
  const onPicked = (pickedArr?: TKnowledgeItem[]) => {
    const picked = pickedArr?.[0]
    if(picked){
      setLinkValue(picked.linkUrl)
      setLinkText(picked.title)
      if(picked.picUrl){
        setLinkPoster(picked.picUrl)
      }
    }
  }

  // 显示知识库导入弹层
  const showKnowlegePopup = ()=> {
    setShowPopup(true)
  }


  const handleSubmit = async () => {
    if(!data?.id){
      return;
    }
    if (loading) {
      return;
    }
    const c = {
      data: {
        link: linkValue,
        text: linkText,
        layout: layout ?? 'center',
        poster: linkPoster,
        linkType: data.linkType,
        id: currentComponent?.data.id,
        index: currentComponent?.data?.index,
      },
      enabled: currentComponent?.enabled ?? true,
      type: EComponentType.link,
    };

    await saveComponent(c);
    Taro.navigateBack();
  };





  return (
    <PageCustom>
      <NavBarNormal>链接</NavBarNormal>
      <View className="flex flex-col items-center w-full">
        <View className="flex flex-col items-center gap-16 w-full px-16 pb-120">
          <View className="flex flex-col gap-6 w-full">
            <View className="flex w-full items-center">
              <View className="flex flex-1 items-center">
                <View className="flex text-14 leading-28 font-medium flex-1">链接地址<Text className="text-red">*</Text></View>
              </View>
              <View className="text-primary" onClick={showKnowlegePopup}>知识库导入</View>
            </View>
            <WemetaTextarea
              value={linkValue}
              onInput={(value: string) => setLinkValue(value)}
              placeholder="请输入URL..."
            ></WemetaTextarea>
          </View>
          <View className="flex flex-col gap-6 w-full">
            <View className="flex w-full items-center">
              <View>链接描述</View>
            </View>
            <WemetaInput
              value={linkText}
              onInput={(value: string) => setLinkText(value)}
              placeholder="请输入..."
              maxlength={50}
            />
          </View>
          <FormitemSingleImage url={linkPoster} setUrl={setLinkPoster} ></FormitemSingleImage>
        </View>
        <BottomBar>
          <WemetaButton disabled={!linkValue.length} className="flex-1" onClick={handleSubmit}>保存</WemetaButton>
        </BottomBar>
      </View>

      <KnowledgePicker title="知识库-链接" types={[EKnowlegeTypes.web]} onPicked={onPicked} setShow={setShowPopup} show={showPopup}></KnowledgePicker>

    </PageCustom>
  );
}
