import { Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useContext, useState } from 'react'
import classNames from 'classnames'
import ProductItem from '../../productItem'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import PopupModal from '@/components/popupModal'
import { useCurrenCode } from '@/context/ContextCodeSetting'
import { goLink } from '@/common/common'

interface Parma {
  productInfo: any
  sale_mode_name: string
}

type IndexParam = {
  onChange: (val: string) => void
  onSetColorData: () => void
} & Parma

export default memo((props: Parma) => {
  const { productInfo } = props
  const { dispatch, productData } = useCurrenCode()
  const index = productInfo.index_str.split('_')[0]
  const getNewName = useCallback((name) => {
    productData.data.product_details[index] = {
      ...productData.data.product_details[index],
      product_name: name,
    }
    dispatch({ type: 'updateData', data: { ...productData.data } })
  }, [productInfo])
  const toSetColorData = useCallback(() => {
    dispatch({ type: 'setColorData', data: productInfo })
    goLink('/pages/codeSetting/codeColorList/index')
  }, [productInfo])

  return <>
    <Index {...props} onChange={getNewName} onSetColorData={toSetColorData} />
  </>
})

const Index = memo((props: IndexParam) => {
  const { productInfo, sale_mode_name, onSetColorData } = props
  const [showEdit, setShowEdit] = useState(false)
  const [upStatus, setStatus] = useState(false)
  const [title, setTitle] = useState('')
  console.log('productInfo内容33：：：', productInfo)
  const onUpdate = () => {
    setTitle(productInfo.product_name)
    setShowEdit(true)
  }
  const onConfirm = (item) => {
    props.onChange?.(item)
  }
  return <>
    <View className={styles.product_list__item}>
      <View className={styles['product_list__item--title']} >
        <View className={styles.con} onClick={onUpdate}>
          <Text className={styles.product_title}>{productInfo.product_name}</Text>
          <IconFont name="icon-shuru" size={50} />
          <Text className={styles.mode_status}>{sale_mode_name}</Text>
        </View>
        <View className={styles.update} onClick={onSetColorData}>
          <Text>编辑</Text>
          <IconFont name="icon-rukou" size={35} />
        </View>
      </View>
      <View className={classNames(styles['product_list__item--con'], upStatus && styles['product_list__item--con_close'])}>
        {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
      </View>
      <View className={styles.up_btn} onClick={() => setStatus(!upStatus)}>{upStatus ? '查看更多' : '收起'}<View className={classNames(styles.up_icon, upStatus ? styles.open_up_icon : styles.close_up_icon)}><IconFont name="icon-shangla" size={35} /></View></View>
    </View>
    <PopupModal show={showEdit} title="修改面料名称" defaultValue={title} onClose={() => setShowEdit(false)} onConfirm={onConfirm} />
  </>
})
