import { Image, Text, View } from '@tarojs/components'
import classnames from 'classnames'
import type { FC } from 'react'
import { memo, useMemo, useRef, useState } from 'react'
import Upload from '../Upload'
import styles from './index.module.scss'
import { screenshot } from '@/common/util'
import { formatImgUrl, formatUrl } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'

interface TextureEvent {
  onUploadConfirm?: (file: string) => void
}
interface PropsType extends TextureEvent {
  list: any[]
  detail: any
  uploadConfirmState: boolean
}

const Texture: FC<PropsType> = (params) => {
  const { onUploadConfirm, list, detail, uploadConfirmState } = params
  console.log('detail==>', detail)

  const handleUploadConfirm = (url) => {
    onUploadConfirm && onUploadConfirm(url)
  }

  const uploadEl = useRef<any>(null)

  const handleOpenModal = () => {
    uploadEl.current.handleTriggerUploadModal(true)
  }

  const calcNoSampling = useMemo(() => {
    const len = list?.filter((item) => {
      return item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0
    })
    return len?.length ?? 0
  }, [list])

  return (
    <View className={styles['texture-container']}>
      <View className={styles['tc-info']}>
        <View onClick={handleOpenModal} className={styles['tc-i-upload']}>
          {detail.texture_url && <Image src={formatUrl(detail.texture_url)} />}
          <View v-else className={styles['tc-i-u-box']}>
            <IconFont name="icon-shangchuanwenli" size={66} color="#707070"></IconFont>
            <View>上传纹理</View>
          </View>
        </View>
        <View className={styles['tc-i-num']}>
          <View>
            <View className="color-blue">{(list?.length ?? 0) - calcNoSampling}</View>
            <Text>已取样</Text>
          </View>
          <View>
            <View className="color-yellow">{calcNoSampling}</View>
            <Text>未取样</Text>
          </View>
        </View>
      </View>
      <Upload uploadConfirmState={uploadConfirmState} onUploadConfirm={handleUploadConfirm} ref={uploadEl} />
    </View>
  )
}
export default Texture
