import { ScrollView, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import classNames from 'classnames'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import LabAndImg from '@/components/LabAndImg'
import IconFont from '@/components/iconfont/iconfont'
import { GetProductDetailApi } from '@/api/material'
import { formatHashTag } from '@/common/fotmat'
import colorItem from '@/pages/codeList/components/colorItem'
import { goLink } from '@/common/common'

export interface ColorItem {
  bulk_price: number
  code: string
  id: number
  kind_code: string
  kind_id: number
  kind_name: string
  lab: { l: number; a: number; b: number }
  last_bulk_price: number
  length_cut_price: number
  name: string
  rgb: { r: number; g: number; b: number }
  texture_url: string
  update_price_time: string
  weight_cut_price: number
  status: boolean
  count?: number
}

export interface Param {
  show: boolean
  product_id: number
  onClose?: () => void
  onSelected?: (val: ColorItem[]) => void
  defaultValueIds?: number[]
}

export default memo((props: Param) => {
  const { show = false, onClose, product_id, onSelected, defaultValueIds = [] } = props
  const [colorList, setColorList] = useState<ColorItem[]>([])

  const { fetchData: productFetchData } = GetProductDetailApi()
  const getProductDetail = async() => {
    const res = await productFetchData({ id: product_id })
    setColorList(initData(res.data.product_color_list) || [])
  }

  useEffect(() => {
    (show && product_id) && getProductDetail()
    !show && setColorList([])
  }, [show, product_id])

  const colorListRef = useRef<ColorItem[]>([])
  useEffect(() => {
    colorListRef.current = colorList
  }, [colorList])

  const initData = (data) => {
    if (defaultValueIds.length > 0) {
      return data.map((item, index) => {
        if (defaultValueIds.includes(item.id)) {
          return data[index] = { ...item, status: true }
        }
        return item
      })
    }
    else {
      return data
    }
  }

  const onSelect = useCallback((val: ColorItem) => {
    colorListRef.current.map((item, index) => {
      if (item.id === val.id) {
        colorListRef.current[index] = { ...item, status: !item.status }
      }
    })
    setColorList(() => [...colorListRef.current])
  }, [])

  const selectCount = useMemo(() => {
    let count = 0
    colorList.map(item => item.status && (count += 1))
    return count
  }, [colorList])

  const onSubmit = () => {
    const data: ColorItem[] = []
    colorList?.map((item) => {
      if (item.status) { data.push({ ...item, count: 1 }) }
    })
    onSelected?.(data)
  }
  return <View className={styles.main}>
    <Popup show={show} showTitle={false} onClose={onClose}>
      <View className={styles.header}>
        <Text>请选择色号剪样( {colorList.length} )</Text>
        <Text>剪样大小为A4，大约22cm*30cm</Text>
      </View>
      <View className={styles.color_list}>
        <ScrollView scrollY className={styles.scroll_view}>
          <View className={styles.color_list_con}>
            {colorList?.map((item) => {
              return <ColorSelectItem item={item} key={item.id} onSelect={onSelect} />
            })}
          </View>
        </ScrollView>
      </View>
      <View className={styles.btns}>
        <View className={styles.cancel} onClick={onClose}>取消</View>
        <View className={styles.submit} onClick={onSubmit}>领取剪样({selectCount})</View>
      </View>
    </Popup>
  </View>
})

interface ColorItemCom {
  item: ColorItem
  onSelect?: (val: ColorItem) => void
}
const ColorSelectItem = memo((props: ColorItemCom) => {
  const { item, onSelect } = props
  return <View key={item.id} className={styles.item} onClick={() => onSelect?.(item)}>
    <View className={classNames(styles.item_color, item.status && styles.select_color)}>
      <LabAndImg
        value={{}}
        round
        name={formatHashTag(item.code)}
      />
      {item.status && <View className={styles.icon}>
        <IconFont name="icon-xuanzhongyanse" size={35} />
      </View>}
    </View>
    <View className={styles.item_name}>{item.name}</View>
  </View>
})
