import {View} from '@tarojs/components'
import WidgetCard from "@/components/widgets/widget-card/index";
import WidgetTypeRow, {
} from "@/components/widgets/widget-type-row/index";
import Taro from '@tarojs/taro';


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
  onStyleChanged: (c: TComponentItem) => void
  onClick: () => void;
}
export default ({
  index,
  editMode,
  component,
  components,
  onSwitchChanged,
  onDelete,
  onMove,
  onStyleChanged,
  onClick
}:Props) => {
  const text = component?.data?.text ? component?.data?.text : component?.data.placeholder
  
  const IconPhone = ()=> {
    return <View className='component-icon-tel'></View>
  }
  const handleClick = ()=> {
    if(editMode){
      onClick()
    }else{
      Taro.makePhoneCall({phoneNumber: component?.data?.text})
    }
  }
  
  return <>
      
      <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'}})
          }
        }}
      >
        <WidgetTypeRow
          editMode={editMode}
          onClick={handleClick}
          layout={component?.data?.layout}
          type={IconPhone()}
        >
         {text} 
        </WidgetTypeRow>
      </WidgetCard>
  </>
}