import { View } from '@tarojs/components'
import style from './index.module.less'
import Taro from '@tarojs/taro';
import { useComponentStore } from '@/store/componentStore'
import { TEntityComponent } from '@/types';
interface Props {
  children?: React.ReactChild |  React.ReactChild[];
  center?: boolean;
  id?: number
  title?: string
  editMode?: boolean
  data?: TEntityComponent
}



const Index: React.FC<Props> = ({children, center=false, id, editMode=true, title = '', data }) => {
  const { setCurrentComponent } = useComponentStore();

  const handleClick = ()=> {
    if(editMode){
      data && setCurrentComponent(data)
      Taro.navigateTo({
        url: `/pages/editor-pages/editor-title/index?id=${id}&title=${title}`
      })
    }
  }
  const renderTitle = ()=> {
    if(center){
     return (
      <>
        <View className={style.centerIcon}>
          <View className={style.centerIconSmallSquare}></View>
          <View className={style.centerIconSquare}></View>
        </View>
        {children}
        <View className={style.rightIcon}>
          <View className={style.centerIconSmallSquare}></View>
          <View className={style.centerIconSquare}></View>
        </View>
      </>
     ) 
    }
    return (
      <>
        <View className={style.leftIcon}></View>
        {children}
      </>
    )
  }

  return (
    <View className={`flex items-center gap-8 px-16 font-semibold leading-24 text-16 ${center ? 'justify-center': ''}`} onClick={handleClick}>
      {renderTitle()}
    </View>
  )
}

export default Index
