import { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/nav-bar-normal/index";
import Popup from "@/components/popup/popup";
import editorStyle from "../editor.module.less";
import { useCharacterStore } from "@/store/characterStore";
import { useComponentStore } from "@/store/componentStore";
import WemetaInput from "@/components/wemeta-input/index";

export default function Index() {
  const router = useRouter();
  const { id } = router.params;
  const deltaNum = id ? 1 : 2;
  let currentComponent = useComponentStore((state) => state.currentComponent);
  const character = useCharacterStore((state) => state.character);
  const { saveComponent } = useComponentStore();
  const loading = useComponentStore((state) => state.loading);
  const { value } = currentComponent?.data ?? {};
  const [storeProductValue, setStoreProductValue] = useState<{
    appid: string;
    productId: string;
  }>(value ?? {});

  const [show, setShow] = useState(false);
  const [tipsType, setTipsType] = useState(1);

  const handleSave = async () => {
    if (loading) {
      return;
    }
    if (!storeProductValue.appid || !storeProductValue.productId) {
      return;
    }
    const c = {
      data: {
        value: storeProductValue,
        layout: 'mini',
      },
      enabled: currentComponent?.enabled ?? true,
      id: currentComponent?.id,
      name: currentComponent?.name ?? "微信小店商品",
      characterProfileId:
        currentComponent?.characterProfileId ?? character?.profileId,
      type: "storeProduct",
    };
    console.log(c);
    await saveComponent(c);
  };

  const handleNavBack = async () => {
    await handleSave();
  };

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

  const showTips = (type: number) => () => {
    setTipsType(type);
    setShow(true);
  };

  

  
  const renderTips = (type: number) => {
    if (type === 1) {
      return (
        <>
          <View>
            🌟 <Text className="font-medium">小绿提示：</Text>
            <Text>通过微信小店后台 - 商品管理 - 商品列表 - 规格/编码获取。</Text>
          </View>
          <Image
            className="w-full"
            mode="widthFix"
            src="https://cdn.wehome.cn/cmn/png/214/META-H8UKXHWU-PIWQ5G6H7F9LO74FT7QR2-9SOBIJ4M-KC.png"
          ></Image>
        </>
      );
    }
    return (
      <>
        <View>
          🌟 <Text className="font-medium">小绿提示：</Text>
          <Text>
          通过微信小店后台 - 商品管理 - 商品规格/编码
          </Text>
        </View>
        <Image
          className="w-full"
          mode="widthFix"
          src="https://cdn.wehome.cn/cmn/png/39/META-H8UKXHWU-PIWQ5G6H7F9LO74FT7QR2-DVYBIJ4M-LC.png"
        ></Image>
      </>
    );
  };

  return (
    <PageCustom>
      <NavBarNormal
        backText="保存"
        navDelta={deltaNum}
        onNavBack={handleNavBack}
      >
        填写小店商品信息
      </NavBarNormal>
      <View className="flex flex-col items-center w-full pt-20">
        <View className={editorStyle.container}>
          <View className={editorStyle.formContainer}>
            <View className={editorStyle.formItem}>
              <View className={editorStyle.formItemLabel}>
                <View className="flex-1">小店ID</View>
                <View className="text-green" onClick={showTips(1)}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={storeProductValue.appid}
                onInput={(value: string) => setValueByKey("appid", value)}
                placeholder="长按粘贴小店ID..."
              />
            </View>
            <View className={editorStyle.formItem}>
              <View className={editorStyle.formItemLabel}>
                <View className="flex-1">商品ID</View>
                <View className="text-green" onClick={showTips(2)}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={storeProductValue.productId}
                onInput={(value: string) => setValueByKey("productId", value)}
                placeholder="长按粘贴商品ID..."
              />
            </View>            
          </View>
        </View>
      </View>

      <Popup
        title={tipsType === 1 ? "获取小店ID" : "获取商品ID"}
        show={show}
        setShow={setShow}
      >
        <View className="flex flex-col gap-16 mb-44">
          <View
            className={`flex flex-col p-12 gap-10 text-14 rounded-20 leading-22 text-gray-65 bg-gray-f8 overflow-hidden`}
          >
            {renderTips(tipsType)}
          </View>
          <View className='button-rounded-big mt-20' onClick={() => setShow(false)}>知道了</View>
        </View>
      </Popup>
    </PageCustom>
  );
}