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 IconArrowRight from "@/images/icon_24_right.png";
import IconMiniprogram from "@/components/icon/icon-miniprogram";
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;
}

export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onClick,
}: Props) => {
  const data =
    component.data ||
    ({ value: {} } as {
      value: {
        shortLink: string;
        poster: string;
        name: string;
      };
    });
  // 非编辑模式背景显示为白色
  const editModeStyle = editMode ? style.editMode : style.showMode;
  const openMiniProgram = (value: any) => {
    console.log(value);
    if (!value.shortLink) {
      return;
    }
    Taro.navigateToMiniProgram({
      shortLink: value.shortLink,
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      },
    });
  };
  const handleClick = () => {
    if (editMode) {
      onClick(component, `/pages/editor-pages/editor-mini-program/index`);
    } else {
      openMiniProgram(component.data?.value);
    }
  };

  const renderPoster = () => {
    if (data.value.poster) {
      return (
        <>
          <Image
            src={data.value.poster}
            className={style.posterImg}
            mode="aspectFill"
            lazyLoad
          ></Image>

          <View className={style.cornerIcon}>
            {IconMiniprogram({ width: "12px", height: "12px" })}
          </View>
        </>
      );
    }
    return <>
      <View className={style.defaultIcon}>
        {IconMiniprogram({ width: "24px", height: "24px" })}
      </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={`${editMode ? "px-16" : ""}`}>
          <View
            className={`${style.card} ${editModeStyle}`}
            onClick={() => handleClick}
          >
            <View className={style.poster}>{renderPoster()}</View>
            <View className={`${style.infoColumn} truncate`}>
              <View className={`${style.nameRow}`}>
                <View className={`${style.text} truncate`}>
                  {data.value.name?.length ? data.value.name : (data.value.shortLink ? data.value.shortLink : data.value.placeholder)}
                </View>
              </View>
            </View>
            <Image
              src={IconArrowRight}
              className={style.arrow}
              mode="aspectFill"
              lazyLoad
            ></Image>
          </View>
        </View>
      </WidgetCard>
    </>
  );
};
