import WidgetCard from "@/components/widgets/widget-card/index";
import WidgetTypeRow from "@/components/widgets/widget-type-row/index";
import { TComponentItem } from "@/types/agent";
import type {
  TSocialMediaItem,
} from "@/types/index";
interface Props {
  index: number
  editMode: boolean
  component: TComponentItem
  components: TComponentItem[]
  mediaItem: TSocialMediaItem
  onSwitchChanged: (c: TComponentItem, checked: boolean)=> void
  onDelete:(c: TComponentItem)=> void
  onClick:() => void
  onMove: (c: TComponentItem, direction: number) => void
  showMediaLink: (mediaItem: TSocialMediaItem, link: string) => void
  onStyleChanged: (c: TComponentItem) => void
}
export default ({
  index,
  editMode,
  component,
  components,
  mediaItem,
  onSwitchChanged,
  onDelete,
  onClick,
  onMove,
  showMediaLink,
  onStyleChanged
}:Props) => {
  return <>
    <WidgetCard
      index={index}
      enabled={component.enabled}
      onSwitchChanged={(checked)=> onSwitchChanged(component, checked)}
      components={components}
      editMode={editMode}
      onDelete={() => onDelete(component)}
      onClick={onClick}
      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'}})
        }
      }}
    >
      <WidgetTypeRow
        layout={component.data?.layout}
        className={mediaItem.className}
        mediaItem={mediaItem}
        rightArrow={true}
        data={component.data}
        editMode={editMode}
        setShow={showMediaLink}
      >
        {component.data?.text.length ? component.data.text : component.data?.link}
      </WidgetTypeRow>
    </WidgetCard>
  </>
}