import { Text, View } from '@tarojs/components'
import { memo, useCallback, useContext, useMemo, useRef, useState } from 'react'
import classNames from 'classnames'
import Big from 'big.js'
import ProductItem from '../../productItem'
import type { NumberParam } from '../../settingNumber'
import SettingNumber from '../../settingNumber'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import PopupModal from '@/components/popupModal'
import { useCurrenCode } from '@/context/ContextCodeSetting'
import colorItem from '@/pages/codeList/components/colorItem'

interface Parma {
  productInfo: any
  sale_mode_name: string
}

type IndexParam = {
  onChangeName: (val: string) => void
  onChangeNumber: NumberParam
} & 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 }, update_status: 2 })
  }, [productInfo])

  const changeNumber: NumberParam = useCallback((num, type) => {
    // 更新整体数据
    const updateData = {
      price: productInfo?.price_admin,
      weight: productInfo?.weight_admin,
      weight_error: productInfo?.weight_error_admin,
    }
    if (type === 'weight') {
      updateData.weight = num * 1000
    }
    else if (type === 'sale_price') {
      updateData.price = num * 100
    }
    else {
      updateData.weight_error = num * 1000
    }
    // 需要传给后端
    productData.data.product_details[index].weight_admin = updateData.weight
    productData.data.product_details[index].price_admin = updateData.price
    productData.data.product_details[index].weight_error_admin = updateData.weight_error

    // 更新原始数组
    productData.data.product_details[index]?.product_color_details?.map((item) => {
      if (item.sale_mode === 0) {
        item.weight_setting = Big(updateData.weight).times(item.roll).add(item.weight).toNumber()
        item.weight_error_setting = Big(updateData.weight_error).times(item.roll).add(item.weight_error).toNumber()
      }
      else {
        item.weight_setting = Big(updateData.weight).add(item.weight).toNumber()
        item.weight_error_setting = Big(updateData.weight_error).add(item.weight_error).toNumber()
      }
      item.price_setting = Big(updateData.price).add(item.price).toNumber()
    })
    productData.data.product_details[index] = JSON.parse(JSON.stringify(productData.data.product_details[index]))
    dispatch({ type: 'updateData', data: { ...productData.data }, update_status: 1 })
  }, [productInfo])

  return <>
    <Index {...props} onChangeName={getNewName} onChangeNumber={changeNumber} />
  </>
})

const Index = memo((props: IndexParam) => {
  const { productInfo, sale_mode_name } = props
  const [showEdit, setShowEdit] = useState(false)
  const [upStatus, setStatus] = useState(false)
  const [title, setTitle] = useState('')
  const onUpdate = () => {
    setTitle(productInfo.product_name)
    setShowEdit(true)
  }
  const onConfirm = (item) => {
    props.onChangeName?.(item)
  }

  const getNumber: NumberParam = (num, type) => {
    props.onChangeNumber?.(num, type)
  }

  const defaultNum = useMemo(() => {
    return {
      weight: Big(productInfo.weight_admin || 0).div(Big(1000)).toNumber(),
      sale_price: Big(productInfo.price_admin || 0).div(Big(100)).toNumber(),
      weight_error: Big(productInfo.weight_error_admin || 0).div(Big(1000)).toNumber(),
    }
  }, [productInfo])
  return <>
    <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}>{sale_mode_name}</Text>
      </View>
      <SettingNumber sale_mode={productInfo?.sale_mode} onNumber={getNumber} defaultValue={defaultNum} />
      <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} />
  </>
})
