import { View, Image } from "@tarojs/components";
import style from "./index.module.less";
import React from "react";
import WemetaSwitch from "../../WemetaSwitch/index";
import type { TEntityComponent } from "@/types/index";
import IconChange from '@/images/svgs/website/IconChange.svg'
import IconUp from '@/images/svgs/website/IconUp.svg'
import IconDown from '@/images/svgs/website/IconDown.svg'
import IconDelete from '@/images/svgs/website/IconDelete.svg'
import Taro from "@tarojs/taro";
interface Props {
  children?: React.ReactChild | React.ReactChild[];
  index: number;
  className?: string
  editAreaClassName?: string
  enabled?: boolean;
  components: TEntityComponent[] | [];
  editMode?: boolean;
  disableChangeStyle?: boolean;
  id?: number;
  onClick?: () => void;
  onDelete?: () => void;
  onMove?: (direction: number) => void;
  onSwitchChanged?: (checked: boolean) => void;
  onChanged?: () => void;
}

const Index: React.FC<Props> = ({
  className = '',
  editAreaClassName='',
  enabled = false,
  components,
  index,
  children,
  editMode = false,
  disableChangeStyle = false,
  onClick,
  onDelete,
  onChanged,
  onMove,
  onSwitchChanged,
}) => {
  const handleSwitchChange = (checked: boolean) => {
    onSwitchChanged && onSwitchChanged(checked);
  };
  const handleDelete = () => {
    if (onDelete) {
      Taro.showModal({
        title: "提示",
        content: "确定删除该组件吗？",
        success(res) {
          if (res.confirm) {
            onDelete();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    }
  };
  const handleMove = (direction: number, disabled: boolean) => {
    if (disabled) {
      return;
    }
    if (onMove) {
      onMove(direction);
    }
  };
  // 是否在排在第一个
  const isFirst = !components.length || index === 0;
  // 是否排在最后一个
  const isLast = !components.length || components.length - 1 === index;
  const renderEditArea = () => {
    if (editMode) {
      return (
        <View className={`${style.editArea} ${editAreaClassName}`}>
          <View className={style.editAreaButtons}>
            <View className="flex flex-1 items-center">
              {!disableChangeStyle && (
                <Image
                  src={IconChange}
                  mode="widthFix"
                  className={`w-20 h-20 ${style.pressed}`}
                  onClick={onChanged}
                ></Image>
              )}
            </View>
            <View
              className={`${style.editButton} ${
                isFirst ? style.buttonDisabled : ""
              } ${style.pressed}`}
              onClick={() => handleMove(0, isFirst)}
            >
              <Image
                  src={IconUp}
                  mode="widthFix"
                  className={`w-20 h-20`}
                ></Image>
            </View>
            <View
              className={`${style.editButton} ${
                isLast ? style.buttonDisabled : ""
              } ${style.pressed}`}
              onClick={() => handleMove(1, isLast)}
            >
              <Image
                  src={IconDown}
                  mode="widthFix"
                  className={`w-20 h-20`}
                ></Image>
            </View>
            <View
              className={`${style.editButton} ${style.pressed}`}
              onClick={handleDelete}
            >
             <Image
                  src={IconDelete}
                  mode="widthFix"
                  className={`w-20 h-20`}
                ></Image> 
            </View>
            <WemetaSwitch
              checked={enabled}
              onChange={(checked) => handleSwitchChange(checked)}
            ></WemetaSwitch>
          </View>
        </View>
      );
    }
  };

  const handleClick = () => {
    onClick && onClick();
  };
  const handleStopPropagation = (e) => {
    e.stopPropagation();
  };

  return (
    <View
      className={`${style.widgetCardContainer} ${
        editMode ? style.editMode : ""
      } ${className}`}
      onClick={handleClick}
    >
      <View>{children}</View>
      <View onClick={handleStopPropagation}>{renderEditArea()}</View>
    </View>
  );
};

export default Index;
