import {View} from '@tarojs/components'
import WidgetCard from "@/components/widgets/widget-card/index";
import WidgetTitle from "@/components/widgets/widget-title/index";
import type {
  IEntityDocument,
  TEntityComponent,
} from "@/types/index";

interface Props {
  index: number
  editMode: boolean
  component: TEntityComponent
  components: TEntityComponent[]
  onSwitchChanged: (c: TEntityComponent, checked: boolean)=> void
  onDelete:(c: IEntityDocument)=> void
  onMove: (c: TEntityComponent, direction: number) => void
  onStyleChanged: (c: TEntityComponent) => void
}
export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onStyleChanged,
}:Props) => {
  return <>
    <View className={`${index === 0 ? "" : "mt-48"}`}>
      <WidgetCard
        enabled={component.enabled}
        onSwitchChanged={(checked)=> onSwitchChanged(component, checked)}
        index={index}
        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'}})
          }
        }}
      >
        <WidgetTitle
          center={component?.data?.layout === "center"}
          data={component}
          editMode={editMode}
        >
          {component?.data?.text}
        </WidgetTitle>
      </WidgetCard>
    </View>
  </>
}