import { View } from '@tarojs/components'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import Big from 'big.js'
import type { ItemType } from '../recommendProductItem'
import RecommendProductItem from '../recommendProductItem'
import Search from '../search'
import styles from './index.module.scss'
import type { listType, saleModeType } from '@/common/enum'
import { SALE_MODE_SETTING } from '@/common/enum'
import { AddShoppingCartApi, GetScrewProductApi } from '@/api/shopCart'

interface ParamType {
  shopId: number
  onShow?: boolean
  onClose?: () => void
  submitSuccess?: () => void
}
type DataType = ItemType
interface submitType {
  color_list: { product_color_id: number; roll: number; length: number }[]
  sale_mode: saleModeType
  is_screw_recommend: boolean
}
export default memo((props: ParamType) => {
  const { shopId, submitSuccess, onShow = false, onClose } = props
  const [filter, setFilter] = useState({
    id: 0,
    sale_mode: 0,
  })
  const submitData = useRef<submitType>({
    sale_mode: 0,
    color_list: [],
    is_screw_recommend: true,
  })
  useEffect(() => {
    (filter.id !== shopId) && setFilter(e => ({ ...e, id: shopId }))
  }, [shopId])
  const [productData, setProductData] = useState<DataType>()
  const { fetchData: getScrewProductFetchData } = GetScrewProductApi()
  const getScrewProduct = async() => {
    const res = await getScrewProductFetchData({ id: filter.id, sale_mode: filter.sale_mode })
    if (res.success) {
      res.data = {
        ...res.data,
        sale_mode_type: filter.sale_mode,
      }
      onSubmitData(SALE_MODE_SETTING[filter.sale_mode].defaultNum, res.data.screw_color_id)
      setProductData(res.data)
    }
  }
  const [showOpen, setShowOpen] = useState(false)
  useEffect(() => {
    setShowOpen(() => onShow)
  }, [onShow])

  useEffect(() => {
    showOpen && getScrewProduct()
  }, [showOpen, filter])

  const getSelect = useCallback((val: listType) => {
    submitData.current.sale_mode = val.value
    setFilter(e => ({ ...e, sale_mode: val.value }))
  }, [])

  const onChangeNum = useCallback((num) => {
    onSubmitData(num, productData?.screw_color_id)
  }, [productData])

  // 整理提交数据
  const onSubmitData = (num = 0, product_color_id = 0) => {
    const data = { product_color_id, length: 0, roll: 0 }
    console.log('num::::', num)
    if (filter.sale_mode === 0) {
      data.roll = num
    }
    else {
      data.length = Big(num).times(100).toNumber()
    }
    submitData.current.color_list = [data]
  }

  const { fetchData: addShoppingCartfetchData } = AddShoppingCartApi()
  const onSubmit = useCallback(async() => {
    const res = await addShoppingCartfetchData(submitData.current)
    if (res.success) {
      submitSuccess?.()
    }
  }, [])

  const onCloseEven = () => {
    onClose?.()
    setShowOpen(() => false)
  }
  return <>
    {showOpen && <View className={styles.recommended_open}>
      <View className={styles.search}>
        <Search onSelect={getSelect} numberStatus={false} defaultIndex={filter.sale_mode} />
      </View>
      <RecommendProductItem colorItem={productData!} onChangeNum={onChangeNum} />
      <View className={styles.onSubmit} onClick={onSubmit}>确认添加</View>
    </View>}
    {showOpen && <View catchMove className={styles.mask} onClick={onCloseEven}></View>}
  </>
})
