import { View, Input } from '@tarojs/components'
import style from './index.module.less'
import IconMinus from '@/components/icon/icon-minus';
import IconPlus from '@/components/icon/icon-plus';
import { EComponentType } from "@/consts/enum";
export const CompType = {
  title: style.compIconTitle,
  text: style.compIconText,
  link: style.compIconLink,
  local: style.compIconLocal,
  image: style.compIconImage,
  email: style.compIconEmail,
  tel: style.compIconTel,
  bluebook: style.compIconBluebook,
  wechat: style.compIconWechat,
  shiping: style.compIconShiping,
  tiktok: style.compIconTiktok,
  xiaohongshu: style.compIconXiaohongshu,
  kwai: style.compIconKwai,
  bilibili: style.compIconBilibili,
  qq: style.compIconQQ,
  name: style.compIconName,
  comp: style.compIconComp,
  sina: style.compIconSina,
  green: style.compIconGreen,
  shipingVideo: style.compIconShipingVideo,
  miniProgram: style.compIconMiniProgram,
  storeProduct: style.compIconStoreProduct,
  storeHome: style.compIconStoreHome,
};

interface Props {
  children?: React.ReactChild |  React.ReactChild[];
  type: EComponentType;
  typeStyle: string;
  num: number;
  onChange: (num: number, type: EComponentType, typeStyle: string, ) => void
}

const Index =  ({children, type, typeStyle, num, onChange,}: Props)=> {
  
  const handlePlus = () =>{
    if(num >= 9){
      return;
    }
    onChange(num+1, type, typeStyle)
  }
  const handleMinus = () =>{
    if(num <= 0){
      return;
    }
    onChange(num-1, type, typeStyle)
  }
  return(
    <View className={`flex gap-8 ${style.compItem}`}>
      <View className={typeStyle}></View>
      <View className={style.compText}>{children}</View>
      <View className='flex items-center gap-14 w-70'>
        <View onClick={handleMinus}><IconMinus></IconMinus></View>
        <Input value={num}  type='number' />
        <View onClick={handlePlus}><IconPlus></IconPlus></View>
      </View>
    </View>
  )
}

export default Index