import { Image, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './hightSearchList.module.scss'
import type { ListProps } from './components/selectData'
import SelectData from './components/selectData'
import Goods from './components/heightSearchGoods'
import SearchPopup from './components/searchPopup'
import Filter from '@/components/filter'
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from '@/components/sortBtn'
import SearchInput from '@/components/searchInput'
import LinkBlueTooth from '@/components/bluetooth/LinkBlueTooth'
import { useBluetooth } from '@/use/contextBlueTooth'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
import { GetLabProductApi } from '@/api/material'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import { formatHashTag, formatImgUrl } from '@/common/fotmat'
import useLogin from '@/use/useLogin'
import { goLink } from '@/common/common'
import LabAndImg from '@/components/LabAndImg'

export default () => {
  useLogin()

  const firstOpen = useRef(true)
  const [showFilter, setShowFilter] = useState(false)
  // 搜索参数
  const [searchField, setSearchField] = useState({
    l: '',
    a: '',
    b: '',
    page: 1,
    size: 10,
    width: '',
    weight_density: '',
    product_kind_ids: '',
    component: '',
    abstract_sort_key: '',
  })

  // 获取面料列表
  const [materialList, setMaterialList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
  const { fetchData: materialFetchData, state: materialState } = GetLabProductApi()
  const getProductList = async() => {
    const { data } = await materialFetchData(getFilterData(searchField))
    setMaterialList({ list: data.list, total: data.total })
    Taro.stopPullDownRefresh()
    firstOpen.current = false
  }

  // 监听筛选条件变化
  useEffect(() => {
    getProductList()
  }, [searchField])

  // 上拉加载数据
  const pageNum = useRef({ size: searchField.size, page: searchField.page })
  const getScrolltolower = () => {
    if (materialList.list.length < materialList.total) {
      pageNum.current.page++
      const size = pageNum.current.size * pageNum.current.page
      setSearchField({ ...searchField, size })
    }
  }

  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: materialList.list, total: materialList.total, status: materialState.loading })
  }, [materialList, materialState])

  const { state: colorState, measureAndGetLab } = useBluetooth()
  const getLab = () => {
    if (colorState.connected) {
      measureAndGetLab()
    }
    else {
      Taro.showToast({
        title: '请链接设备',
        icon: 'none',
      })
    }
  }

  // 监听lab数据变化
  const [blueToothColor, setBlueToothColor] = useState('')
  useEffect(() => {
    if (colorState.deviceLab && !firstOpen.current) {
      const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
      setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
      setSearchField({ ...searchField, l: rgb[0], a: rgb[1], b: rgb[2], size: 10, page: 1 })
      setMaterialList(() => ({ list: [], total: 0 }))
      pageNum.current = { size: 10, page: 1 }
    }
  }, [colorState.deviceLab])

  const goLinkPage = (item) => {
    goLink('/pages/details/index', { id: item.product_id })
  }

  // 获取筛选条件
  const getFiltr = (e) => {
    pageNum.current.page = 1
    setMaterialList(() => ({ list: [], total: 0 }))
    const { data } = e
    setSearchField({
      ...searchField,
      width: data?.width,
      weight_density: data?.weight,
      size: 10,
      component: data?.element,
      product_kind_ids: data?.seriesId,
    })
    formatSelectList(e)
  }

  // 筛选条件格式化
  const [selectList, setSelectList] = useState<ListProps[]>()
  const formatSelectList = (val = { data: {}, field: {} }) => {
    const data: ListProps[] = []
    for (const key in val.data) {
      if (key !== 'seriesId' && val.data[key] != '') {
        data.push({ title: val.field[key], value: val.data[key] })
      }
    }
    setSelectList([...data])
  }

  // 页面下拉刷新
  usePullDownRefresh(() => {
    setSearchField({ ...searchField, size: 10 })
  })

  // 排序
  type sortParam = 'none' | 'top' | 'bottom'
  const sortComprehensiveRef = useRef<any>(null)
  const sortCollectionRef = useRef<any>(null)
  const [sortStatus, setSortStatus] = useState<{ comprehensive: sortParam; collection: sortParam }>({
    comprehensive: 'none',
    collection: 'none',
  })
  const changeSort = (val) => {
    setMaterialList(() => ({ list: [], total: 0 }))
    if (val == 1) {
      const { status, value } = sortComprehensiveRef.current.changeSort()
      setSortStatus(e => ({ ...e, comprehensive: status, collection: 'none' }))
      setSearchField(e => ({ ...e, abstract_sort_key: value, size: 10, page: 1 }))
    }
    else {
      const { status, value } = sortCollectionRef.current.changeSort()
      setSortStatus(e => ({ ...e, collection: status, comprehensive: 'none' }))
      setSearchField(e => ({ ...e, abstract_sort_key: value, size: 10, page: 1 }))
    }
    pageNum.current = { size: 10, page: 1 }
  }

  const labAndImgObj = useCallback(
    (item) => {
      const img = item ? item.texture_url.split(',')[0] : ''
      return { lab: item.lab, rgb: item.rgb, texture_url: img }
    },
    [materialList],
  )

  const [showPopup, setshowPopup] = useState(false)

  const handSearch = (val) => {
    console.log(val, '222')
    pageNum.current.page = 1
    setMaterialList(() => ({ list: [], total: 0 }))
    setSearchField({
      ...searchField,
      width: val?.width,
      weight_density: val?.weight_density,
      size: 10,
      component: val?.component,
      product_kind_ids: val?.product_kind_ids,
    })
    setshowPopup(false)
  }

  const isShow = useMemo(() => {
    if (searchField.width !== ''
    || searchField.weight_density !== ''
    || searchField.component !== ''
    || searchField.product_kind_ids !== ''
    ) {
      return false
    }
    else {
      return true
    }
  }, [searchField])

  return (
    <View className={styles.main}>
      <View className={styles.search}>
        <View className={styles.SearchInput}>
          <LinkBlueTooth />
          <SearchInput title="提取颜色" showBorder={false}>
            <View className={styles.bluetooth_color} onClick={() => getLab()}>
              {(blueToothColor && <View className={classnames(styles.color_bock)} style={{ background: blueToothColor }}></View>) || (
                <View className={classnames(styles.color_bock_no)}>请取色</View>
              )}
            </View>
          </SearchInput>
        </View>
      </View>
      <View className={styles.topBox}>
        <View className={styles.topLeft}>搜索结果</View>
        <View className={styles.filter_more} onClick={() => setshowPopup(true)}>
          <Text className={classnames('iconfont icon-shaixuan', isShow ? styles.miconfont : styles.activemiconfont)}></Text>
          <Text className={classnames(!isShow ? styles.activeFont : '')}>筛选</Text>
        </View>
      </View>
      <View className={styles.filterBox}>
        <View className={styles.text_zh} onClick={() => changeSort(1)}>
          <Text style={{ marginRight: '5px' }}>综合</Text>
          <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{ desc: '1', asc: '-1' }} />
        </View>
        <View className={styles.text_sc} onClick={() => changeSort(2)}>
          <Text style={{ marginRight: '5px' }}>收藏</Text>
          <SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{ desc: '2', asc: '-2' }} />
        </View>
      </View>
      {/* <View className={styles.filter}>
        <View className={styles.filter_all}>
          <View className={styles.text_zh} onClick={() => changeSort(1)}>
            <Text>综合</Text>
            <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{ desc: '1', asc: '-1' }} />
          </View>
          <View className={styles.text_sc} onClick={() => changeSort(2)}>
            <Text>收藏</Text>
            <SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{ desc: '2', asc: '-2' }} />
          </View>
        </View>
        <View className={styles.filter_btn_con}>
          <View className={styles.filter_scroll}>
            <SelectData list={selectList} />
          </View>
          <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
            <Text>筛选</Text>
            <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
          </View>
        </View>
      </View> */}
      <View className={styles.list}>
        {/* <View className={classnames(styles.list_num, styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View> */}
        <View className={styles.scroll}>
          <InfiniteScroll selfonScrollToLower={getScrolltolower} statusMore={statusMore}>
            <View className={styles.product_list}>
              {materialList.list.map((item) => {
                return (
                  <Goods clickItem={() => goLink(`/pages/details/index?id=${item.product_id}`)} key={item} data={item}></Goods>
                  // <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
                  //   <View className={styles.product_img}>
                  //     <LabAndImg value={labAndImgObj(item)} />
                  //     <View className={styles.color_num}>{item.product_color_code}</View>
                  //   </View>
                  //   <View className={styles.product_info}>
                  //     <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
                  //     <View className={styles.introduce}>{item.product_kind_name}</View>
                  //   </View>
                  // </View>
                )
              })}
            </View>
          </InfiniteScroll>
        </View>
      </View>
      {/* <Filter show={showFilter} onFiltr={e => getFiltr(e)} onClose={() => setShowFilter(false)} /> */}
      <SearchPopup showPopup={showPopup} closePopup={() => setshowPopup(false)} handSearch={val => handSearch(val)}></SearchPopup>
    </View>
  )
}
