import { Image, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import LabAndImgShow from '../LabAndImgShow'
import styles from './index.module.scss'
import Preview from '@/pages/details/components/preview'
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'

// 该组件宽高为100%需调整外层元素宽高
interface Param {
  value: {
    texture_url?: string // 纹理图路径
    lab?: { l: number; a: number; b: number } // lab
    rgb?: { r: number; g: number; b: number } // rgb
    title?: string
  }
  customImageStyle?: React.CSSProperties
  showStatus?: boolean
  onClick?: (val: Param['value']) => void
  round?: boolean
  name?: string
  suffix?: string
}
const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {}, suffix = '!w200' }: Param) => {
  const _value = useRef(value)
  const _first = useRef(true)
  // lab是否都是0
  const rgbStyle = useMemo(() => {
    const value = _value.current
    if (value?.lab && (value?.lab.l || value?.lab.a || value?.lab.b)) {
      return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
    }
    else {
      return null
    }
  }, [_value.current])

  // useEffect(() => {
  //   if (value?.texture_url) {
  //     const imgs = value.texture_url.split(',').map((item) => {
  //       return formatImgUrl(item, suffix)
  //     })
  //     setImgs(() => imgs[0])
  //   }
  // }, [value])

  const img = useMemo(() => {
    console.log('useMemo', _value.current)
    const value = _value.current
    if (value?.texture_url) {
      const imgs = value.texture_url.split(',').map((item) => {
        return formatImgUrl(item, suffix)
      })
      return imgs[0]
    }
    else {
      return ''
    }
  }, [_value.current, suffix])

  const [labAndImgShow, setLabAndImgShow] = useState(false)
  const closeLabAndImgShow = useCallback(() => {
    setLabAndImgShow(false)
  }, [])

  const onShowLabAndImg = () => {
    onClick?.(_value.current)
    if (!showStatus) { return false }
    setLabAndImgShow(true)
  }

  const [_, setForceUpdate] = useState({})

  const checkLoad = () => {
    _value.current = { ..._value.current, texture_url: '' }
    setForceUpdate({})
  }

  return (
    <>
      <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={onShowLabAndImg}>
        {_value.current.texture_url && (
          <Image
            lazyLoad
            mode="aspectFill"
            src={img}
            onError={checkLoad}
            className={styles.labAndImg_image}
            style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}
          ></Image>
        )}
        {!_value.current.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
        {!_value.current.texture_url && !rgbStyle && (
          <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
        )}
        {name && <View className={styles.labAndImg_name}>{name}</View>}
      </View>
      <LabAndImgShow suffix={suffix} value={_value.current} show={labAndImgShow} onClose={closeLabAndImgShow} />
    </>
  )
}
export default memo(LabAndImg)