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

import { navToWebView } from "@/utils/index";
import { CORP_DOMAINS } from "@/config";
import type { TSocialMediaItem } from "@/types/index";
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,
    link: string,
    mediaItem: TSocialMediaItem
  ) => void;
  onStyleChanged: (c: TComponentItem) => void;
}

export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onClick,
  onStyleChanged,
}: Props) => {
  const data = component?.data;
  const posterExist = data?.poster;
  const mediaItem = {
    value: "link",
    label: data?.text ?? data?.link,
    className: "social-media-link",
    color: "#000",
    bgColor: "#85F393",
  };
  const isOfficialAccountArticle =
    data?.linkType === "weixinOfficialAccountArticle";
  const openMiniProgram = (shortLink: string) => {
    console.log(shortLink);
    if (!shortLink) {
      return;
    }
    Taro.navigateToMiniProgram({
      shortLink: shortLink,
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      },
    });
  };
  const openOfficialAccountArticle = (link: string) => {
    //@ts-ignore
    wx.openOfficialAccountArticle({
      url: link,
    });
  };

  const handleClick = () => {
    const linkValue = data?.link ?? "";
    if (!editMode) {
      // 如果链接是小程序链接，则直接跳转
      if (linkValue.indexOf("#小程序://") > -1) {
        openMiniProgram(linkValue);
        return;
      }
      // 如果是合作方链接，打开webview显示
      if (linkValue.indexOf(CORP_DOMAINS) > -1) {
        navToWebView(linkValue);
        return;
      }
      if (isOfficialAccountArticle) {
        openOfficialAccountArticle(linkValue);
        return;
      }
    }
    // 如果是普通链接，则正常处理成显示链接并复制的逻辑
    onClick(component, linkValue, mediaItem);
  };

  const renderIcon = () => {
    if (posterExist) {
      return <></>;
    }

    if (isOfficialAccountArticle) {
      return <View className={`social-media-wechat`}></View>;
    }

    return <View className={`social-media-link`}></View>;
  };

  const renderRight = () => {
    if (posterExist) {
      return <></>;
    }
    return <View className="w-24 h-24"></View>;
  };

  const renderPoster = (data: any) => {
    return (
      <View className="w-full">
        <MediaItem
          mode="widthFix"
          media={{ url: data.poster, fileType: "image" }}
          extraClass={style.singleMedia}
          isAspectRatio
        ></MediaItem>
      </View>
    );
  };

  const renderContent = () => {
    // 如果存在封面则显示封面
    if (posterExist) {
      return renderPoster(data);
    }
    // 否则展示链接描述文本或链接本身
    return (
      <View
        className={`flex flex-1 ${
          data?.layout === "center" ? "justify-center" : ""
        } truncate`}
      >
        <Text className="block truncate">{data?.text ? data?.text : (data?.link ?  data?.link: data.placeholder)}</Text>
        
      </View>
    );
  };

  if (posterExist && !editMode) {
    return <View onClick={handleClick}>{renderPoster(data)}</View>;
  }

  return (
    <>
      <WidgetCard
        index={index}
        enabled={component.enabled}
        disableChangeStyle={posterExist}
        onSwitchChanged={(checked) => onSwitchChanged(component, checked)}
        components={components}
        editMode={editMode}
        onDelete={() => onDelete(component)}
        onMove={(direction) => onMove(component, direction)}
        
        onChanged={() => {
          if (component.data?.layout === "left") {
            onStyleChanged({
              ...component,
              data: { ...component.data, layout: "center" },
            });
          } else {
            onStyleChanged({
              ...component,
              data: { ...component.data, layout: "left" },
            });
          }
        }}
      >
        <View
          className={`flex items-center gap-8 px-16 w-full`}
          onClick={handleClick}
        >
          {renderIcon()}
          {renderContent()}

          {/* {renderRight()} */}
        </View>
      </WidgetCard>
    </>
  );
};
