import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import WidgetCard from "@/components/widgets/widget-card/index";
import WidgetMedia from "@/components/widgets/widget-media/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: () => void;
  onStyleChanged: (c: TComponentItem) => void
}

export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onClick,
  onStyleChanged,
}: Props) => {
    
  // 非编辑模式下样式需要特殊处理，与其它组件不同
  if(!editMode){
    return (
      <>
        <WidgetMedia
          layout={component.data?.layout}
          mediaList={component.data?.media}
        ></WidgetMedia>
      </>
    )
  }
  
  return (
    <>
      <WidgetCard
        key={component.data.id}
        enabled={component.enabled}
        onSwitchChanged={(checked) => onSwitchChanged(component, checked)}
        index={index}
        components={components}
        editMode={editMode}
        onDelete={() => onDelete(component)}
        onMove={(direction) =>  onMove(component, direction)}
        onClick={onClick}
        onChanged={()=> {
          if(component.data?.layout === 'mini'){
            onStyleChanged({...component, data: {...component.data, layout: 'full'}})
          }else{
            onStyleChanged({...component, data: {...component.data, layout: 'mini'}})
          }
        }}
      >
        <WidgetMedia
          editMode={editMode}
          layout={component.data?.layout}
          mediaList={component.data?.media}
        ></WidgetMedia>
      </WidgetCard>
    </>
  );
};
