import { Text, View } from '@tarojs/components'
import type { FC } from 'react'
import { useMemo } from 'react'
import styles from './index.module.scss'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
import { formatDateTime } from '@/common/format'

interface PropsType {
  lab?: Array<any>
  time?: any
  onLab?: Function
}

const LabColor: FC<PropsType> = (props) => {
  const { lab = [], time, onLab } = props
  const noScale = (val, num = 1) => {
    return val.toFixed(num)
  }

  const labObj = useMemo(() => {
    if (lab.length <= 0) { return { lab: [], rgb: '' } }
    const rgb = toRgb(lab)
    return {
      lab: [noScale(lab[0]), noScale(lab[1]), noScale(lab[2])],
      rgb: `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`,
    }
  }, [lab])

  const labTime = useMemo(() => {
    if (time.length <= 0) { return '' }
    return formatDateTime(time)
  }, [time])

  const onLabEven = () => {
    onLab && onLab()
  }

  return (
    <View className={styles.lab_color_main}>
      <View className={styles.btnColor} onClick={onLabEven} style={{ background: labObj.rgb }}>
        {labObj.lab.length ? '' : '点击取色'}
      </View>
      <View className={styles.labCon}>
        <View className={styles.lab}>
          <Text>L*a*b*:</Text>
          <Text>{labObj.lab[0]}</Text>
          <Text>{labObj.lab[1]}</Text>
          <Text>{labObj.lab[2]}</Text>
        </View>
        <View className={styles.date}>{labTime && <Text>取样时间: {labTime}</Text>}</View>
      </View>
    </View>
  )
}
export default LabColor
