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/NavBarNormal/index";
import Popup from "@/components/popup/popup";

import { useComponentStore } from "@/store/componentStore";
import WemetaInput from "@/components/wemeta-input/index";
import { EComponentType } from "@/consts/enum";
import BottomBar from "@/components/BottomBar";
import WemetaButton from "@/components/buttons/WemetaButton";
import FormitemSingleImage from '@/components/Form/FormItemSingleImage';

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 [shipingValue, setShipingValue] = useState<{
    accountId: string;
    videoId: string;
    desc: string;
    poster: string;
  }>(data.value ?? {});

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

  const handleSubmit = async () => {
    if (loading) {
      return;
    }
    if (!shipingValue.accountId || !shipingValue.videoId) {
      return;
    }
    const c = {
      data: {
        value: shipingValue,
        layout: 'mini',
        id: data.id,
        index: data.index,
      },
      enabled: currentComponent?.enabled ?? true,
      type: EComponentType.shipingVideo,
    };
    console.log(c);
    await saveComponent(c);
    Taro.navigateBack()
  };



  const setValueByKey = (key: string, v: string) => {
    shipingValue[key] = v;
    setShipingValue({
      ...shipingValue,
    });
  };

  const showTips = (type: number) => () => {
    setTipsType(type);
    setShow(true);
  };
  const setLinkPoster = (value: string)=> {
    setValueByKey('poster', value)
  }

  const renderTips = (type: number) => {
    if (type === 1) {
      return (
        <>
          <View>
            🌟 <Text className="font-medium">小蓝本提示：</Text>
            <Text>需要登录微信官方视频号助手平台，首页就找到视频号ID。</Text>
          </View>
          <Image
            className="w-full"
            mode="widthFix"
            src="https://cdn.wehome.cn/cmn/png/196/META-H8UK0IWU-9NNPJOLLD1MU95DE0NMA3-8W1EZW2M-2B1.png"
          ></Image>
        </>
      );
    }
    return (
      <>
        <View>
          🌟 <Text className="font-medium">小蓝本提示：</Text>
          <Text>
            需要登录微信官方视频号助手平台，找到目标视频，点击视频右侧的分享按钮查看。
          </Text>
          <View className="text-orange">视频ID和视频号ID的企业主体一定要相同</View>
        </View>
        <Image
          className="w-full"
          mode="widthFix"
          src="https://cdn.wehome.cn/cmn/png/4/META-H8UKWHWU-6NNPBTA0CSOODDVD47MV3-DFGEZW2M-N81.png"
        ></Image>
      </>
    );
  };

  return (
    <PageCustom>
      <NavBarNormal
      >
        视频号信息
      </NavBarNormal>
      <View className="flex flex-col items-center w-full pt-20">
        <View className="px-16 w-full">
          <View className="flex flex-col gap-16 w-full">
            <View className="flex flex-col gap-6 w-full">
              <View className="flex items-center">
                <View className="flex-1 text-14 leading-28 font-medium">视频号ID<Text className="text-red">*</Text></View>
                <View className="text-primary" onClick={showTips(1)}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={shipingValue.accountId}
                onInput={(value: string) => setValueByKey("accountId", value)}
                placeholder="请输入视频号ID..."
              />
            </View>
            <View className="flex flex-col gap-6 w-full">
              <View className="flex items-center">
                <View className="flex-1 text-14 leading-28 font-medium">视频号视频ID<Text className="text-red">*</Text></View>
                <View className="text-primary" onClick={showTips(2)}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={shipingValue.videoId}
                onInput={(value: string) => setValueByKey("videoId", value)}
                placeholder="请输入视频号视频ID"
              />
            </View>

            <View className="flex flex-col gap-6 w-full">
              <View className="flex items-center">
                <View className="flex-1 text-14 leading-28 font-medium">视频描述</View>
              </View>
              <WemetaInput
                value={shipingValue.desc}
                onInput={(value: string) => setValueByKey("desc", value)}
                placeholder="请输入展示名称..."
              />
            </View>
            <FormitemSingleImage url={shipingValue.poster} setUrl={setLinkPoster} ></FormitemSingleImage>

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

      <BottomBar>
        <WemetaButton className="flex-1" disabled={!shipingValue.videoId.length || !shipingValue.accountId.length} onClick={handleSubmit}>保存</WemetaButton>
      </BottomBar>

      <Popup
        title={tipsType === 1 ? "获取视频号ID" : "获取视频号视频ID"}
        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(tipsType)}
          </View>
        </View>
      </Popup>
    </PageCustom>
  );
}
