import { Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import ColorBlock from './colorBlock'
import IconFont from '@/components/iconfont/iconfont'
import { useCurrenCode } from '@/context/ContextCodeSetting'
import PopupModal from '@/components/popupModal'

interface IndexParam {
  productInfo: any
  onChangeName?: (val: string) => void
}

export default memo((props: IndexParam) => {
  const { productInfo } = props
  const { dispatch, productData } = useCurrenCode()
  const getNewName = useCallback((name) => {
    productData.color_item_data = {
      ...productData.color_item_data,
      product_name: name,
    }
    dispatch({ type: 'updateColorData', data: { ...productData.color_item_data }, update_status: 2 })
  }, [productInfo])

  return <>
    <Index productInfo={productData.color_item_data} onChangeName={getNewName} />
  </>
})

const Index = memo((props: IndexParam) => {
  const { productInfo } = props
  const [showEdit, setShowEdit] = useState(false)
  const [title, setTitle] = useState('')
  const onUpdate = () => {
    setTitle(productInfo.product_name)
    setShowEdit(true)
  }
  const onConfirm = (item) => {
    props.onChangeName?.(item)
  }
  return <>
    <View className={styles.product_list}>
      <View className={styles.product_list__item}>
        <View className={styles['product_list__item--title']} onClick={onUpdate}>
          <Text className={styles.product_title}>{productInfo.product_name}</Text>
          <IconFont name="icon-shuru" size={50} />
          <Text className={styles.mode_status}>{productInfo.sale_mode_name}</Text>
        </View>
        {productInfo?.product_color_details?.map(item => <ColorBlock key={item.product_color_id} colorInfo={item} ></ColorBlock>)}
      </View>
    </View>
    <PopupModal show={showEdit} title="修改面料名称" defaultValue={title} onClose={() => setShowEdit(false)} onConfirm={onConfirm} />
  </>
})
