import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import WidgetCard from "@/components/widgets/widget-card/index";
import style from "./index.module.less";

import { TComponentItem } from "@/types/agent";

interface Props {
  index: number;
  editMode: boolean;
  component: TComponentItem;
  components: TComponentItem[];
  onSwitchChanged: (c: TComponentItem, checked: boolean) => void;
  onDelete: (c: TComponentItem) => void;
  onMove: (c: TComponentItem, direction: number) => void;
  onClick: (c: TComponentItem, url: string) => void;
}

const redirectTips = () => {
  return (
    <View className="text-white text-10 leading-18 bg-gray-4 rounded-30 right-8 bottom-8 inline-block absolute px-6">
      跳转视频号查看
    </View>
  );
};

export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onClick,
}: Props) => {
  const openShipingVideo = (value: any) => {
    if (!value.videoId || !value.accountId) {
      return;
    }
    Taro.openChannelsActivity({
      finderUserName: value.accountId,
      feedId: value.videoId,
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      },
    });
  };
  const handleClick = () => {
    if (editMode) {
      onClick(component, `/pages/editor-pages/editor-channels/index`);
    } else {
      openShipingVideo(component.data?.value);
    }
  };

  const hasValue = component.data.value?.videoId && component.data.value?.accountId

  const renderEmpty = ()=> {
    return <View className="px-16"><View className="component-card-empty mb-16">
      <View className="component-card-content">
        <View className="component-card-empty-figure"></View>
        <View className="component-card-empty-tips">配置视频号图片/视频</View>
      </View>
    </View>
    </View>
  }

  if (!editMode) {
    return (
      <View
        className="rounded-20 overflow-hidden bg-white"
        onClick={handleClick}
      >
        <View className="px-16 py-18">
          <View className="flex items-center gap-8">
            <View className={style.iconVideo}></View>
            <View className="font-medium">
              {component.data?.value?.desc ?? "视频名称"}
            </View>
          </View>
        </View>
        {!hasValue && renderEmpty()}
        {hasValue && component.data?.value?.poster && (
          <View className="w-full overflow-hidden relative">
            <Image
              className="w-full align-bottom"
              mode="widthFix"
              src={component.data.value.poster}
            ></Image>
            {redirectTips()}
          </View>
        )}
      </View>
    );
  }

  return (
    <>
      <WidgetCard
        disableChangeStyle
        index={index}
        enabled={component.enabled}
        onSwitchChanged={(checked) => onSwitchChanged(component, checked)}
        components={components}
        editMode={editMode}
        onDelete={() => onDelete(component)}
        onMove={(direction) => onMove(component, direction)}
        onClick={handleClick}
      >
        <View className="px-16">
          <View className="flex items-center gap-8">
            <View className="social-media-shipingVideo"></View>
            <View className="font-medium">
              {component.data?.value?.desc ?? "视频名称"}
            </View>
          </View>
          {component.data?.value?.poster && (
            <View className="w-full overflow-hidden mt-16 relative">
              <Image
                className="w-full align-bottom"
                mode="widthFix"
                src={component.data.value.poster}
                lazyLoad
              ></Image>
              {redirectTips()}
            </View>
          )}
        </View>
      </WidgetCard>
    </>
  );
};
