import { useMemo, useState, memo } from "react";
import { View, Image,Text } from "@tarojs/components";
import Taro from '@tarojs/taro'
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";
import WemetaInput from "@/components/wemeta-input/index";
import Popup from "@/components/popup/popup";
import style from './index.module.less'
import BottomBar from "@/components/BottomBar";

import { useComponentStore } from "@/store/componentStore";
import FormitemSingleImage from '@/components/Form/FormItemSingleImage';
import { EComponentType } from "@/consts/enum";
import WemetaButton from "@/components/buttons/WemetaButton";
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 [linkValue, setLinkValue] = useState<{
    name: string;
    shortLink: string;
    poster: string;
  }>(data.value);
  const [show, setShow] = useState(false);

  const setValueByKey = (key: string, v: string) => {
    setLinkValue((prev)=> {
      prev[key] = v;
      return {...prev};
    });
  };

  const handleSubmit = async () => {

    if(!data?.id){
      return
    }
    if(loading){
      return;
    }
    const c = {
      data: {
        value: linkValue,
        layout: 'full',
        id: data.id,
        index: data.index,
      },
      enabled: currentComponent?.enabled ?? true,
      type: EComponentType.miniProgram,
    };

    const result = await saveComponent(c)
    if(result){
      Taro.navigateBack()
    }
  };


  const setLinkPoster = (value: string)=> {
    setValueByKey('poster', value)
  }



  const renderTips = () => {
    return (
      <>
        <View>
          🌟 <Text className="font-medium">小蓝本提示：</Text>
          <Text>打开小程序主页 - 顶部更多操作/评分入口 - 复制链接</Text>
        </View>
        <Image
          className="w-full"
          mode="widthFix"
          src="https://cdn.wehome.cn/cmn/png/102/META-H8UKWHWU-KIWQFXN9CWIKI7PA148U3-N5Z1UG4M-H7.png"
        ></Image>
      </>
    );
  };

  return (
    <PageCustom>
      <NavBarNormal>小程序链接</NavBarNormal>
      <View className="flex flex-col items-center w-full">
        <View className="px-16 pt-12 pb-120 w-full">
        <View className="flex flex-col gap-32">
            <View className="flex flex-col gap-6">
              <View className="flex w-full items-center">
                <View className="flex-1 text-14 leading-28 font-medium">小程序名称</View>
              </View>
              <WemetaInput
                value={linkValue.name}
                onInput={(value: string) => setValueByKey("name", value)}
                placeholder="请输入小程序名字..."
                maxlength={50}
              />
            </View>
            <View className="flex flex-col gap-6">
              <View className="flex w-full items-center">
                <View className="flex-1 text-14 leading-28 font-medium">小程序链接<Text className="text-red">*</Text></View>
                <View className="text-primary" onClick={()=> setShow(true)}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={linkValue.shortLink}
                onInput={(value: string) => setValueByKey("shortLink", value)}
                placeholder="长按粘贴小程序链接..."
              />
            </View>
            <FormitemSingleImage url={linkValue.poster} setUrl={setLinkPoster} ></FormitemSingleImage>

          </View>
        </View>
      </View>

      <BottomBar>
          <WemetaButton className="flex-1" disabled={!linkValue.shortLink.length} onClick={handleSubmit}>保存</WemetaButton>
        </BottomBar>

      <Popup
        title='获取小程序链接'
        show={show}
        setShow={setShow}
      >
        <View className="flex flex-col gap-16 mb-88">
          <View
            className={`flex flex-col p-12 gap-10 text-14 rounded-20 leading-22 text-gray-5 bg-gray-f8 overflow-hidden`}
          >
            {renderTips()}
          </View>
        </View>
      </Popup>
    </PageCustom>
  );
}