import { ScrollView, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useUnload } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import Search from '@/components/search'
import NormalButton from '@/components/normalButton'
import LabAndImg from '@/components/LabAndImg2'
import Tag from '@/components/tag'
import MCheckbox from '@/components/checkbox'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import { alert, goLink } from '@/common/common'
import { formatHashTag, formatRemoveHashTag } from '@/common/format'
import Popup from '@/components/popup'
import IconFont from '@/components/iconfont/iconfont'
import { GetCutSampleOrderColorList, GetCutSampleOrderProducts } from '@/api/sampleCutting'

export interface SampleCuttingCache {
  product_id: number
  product_code_and_name: string
  multipleSelection: {
    product_color_id: number
    product_color_code: string
    product_color_name: string
    lab: {
      l: number
      a: number
      b: number
    }
    rgb: {
      r: number
      g: number
      b: number
    }
    texture_url: string
    count: number
  }[]
}
const SampleCuttingList = () => {
  const router = useRouter()
  const isAdd = router?.params?.isAddSampleCutIdList

  const { fetchData, state } = GetCutSampleOrderProducts()

  const [orderList, setOrderList] = useState<{ list: any[]; total: number }>({
    list: [],
    total: 0,
  })
  const multipleSelection = useRef<SampleCuttingCache[]>([])
  // 搜索
  const getSearchData = debounce((value: string) => {
    console.log('search', value)
    setSearchField(val => ({ ...val, product_code_and_name: value }))
  }, 300)
  // 取消
  const handleCancel = () => {
    Taro.navigateBack()
  }

  // redirectTo 会触发 onLoad 事件
  let isRedirect = false
  // 确认
  const handleSubmit = () => {
    Taro.setStorageSync('sampleCuttingCache', JSON.stringify(multipleSelection.current))
    if (router?.params.isGoBack) {
      isRedirect = true
      Taro.navigateBack({
        delta: 1,
      })
    }
    else {
      isRedirect = true
      // 携带id跳转
      goLink('/pages/sampleCutting/addSampleCutting/index', null, 'redirectTo')
    }
  }

  const labAndImgObj = useCallback((item) => {
    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
  }, [])
  // 页码和页数
  const [searchField, setSearchField] = useState<{ product_code_and_name?: string; product_ids?: string; page: number; size: number }>({
    product_code_and_name: '',
    product_ids: '',
    page: 1,
    size: 10,
  })

  const getData = async() => {
    console.log('searchField==>', searchField)
    const res = await fetchData(getFilterData(searchField))
    if (!res.success) {
      return alert.error(res.msg)
    }
    setOrderList({ list: res.data.list, total: res.data.total })
  }

  useEffect(() => {
    getData()
  }, [searchField])

  useDidShow(() => {
    const cache = Taro.getStorageSync('sampleCuttingCache')
    if (cache) {
      multipleSelection.current = JSON.parse(cache) as SampleCuttingCache[]
    }

    if (isAdd) {
      console.log('isAdd', isAdd)
      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
      setSearchField(val => ({ ...val, product_ids: isAdd }))
    }
  })

  // 上拉加载数据
  const pageNum = useRef({ size: searchField.size, page: searchField.page })
  // 列表下拉刷新
  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
  // 下拉刷新
  const getRefresherRefresh = async() => {
    pageNum.current.size = 1
    setRefresherTriggeredStatus(true)
    setSearchField(val => ({ ...val, size: 10 }))
  }
  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: orderList.list, total: orderList.total, status: state.loading! })
  }, [orderList, state.loading])

  const getScrollToLower = useCallback(() => {
    if (orderList.list.length < orderList.total) {
      pageNum.current.page++
      const size = pageNum.current.size * pageNum.current.page
      setSearchField({ ...searchField, size })
    }
  }, [orderList])

  const { fetchData: getColorList } = GetCutSampleOrderColorList()
  const currentSelect = useRef<any>({})
  const handleClickAddButton = async(item: any) => {
    currentSelect.current = item
    const res = await getColorList({ id: item.id })
    if (res.success) {
      setProductList(res.data.list)
      const index = multipleSelection.current.findIndex(val => val.product_id === item.id)
      if (index !== -1) {
        setProductMultipleSelection(multipleSelection.current[index].multipleSelection)
      }
      else {
        setProductMultipleSelection([])
      }
      setShow(true)
    }
    else {
      return alert.error(res.msg)
    }
  }

  useUnload(() => {
    console.log('onUnload', isRedirect)
    if (!isRedirect) {
      Taro.removeStorageSync('sampleCuttingCache')
    }
  })

  const [show, setShow] = useState(false)

  const onClose = () => {
    setShow(false)
    setProductMultipleSelection([])
  }

  const [productList, setProductList] = useState<any[]>([])
  // 点击产品颜色
  const handleClickProductColor = (item: any) => {
    const index = productMultipleSelection.findIndex(val => val.product_color_id === item.product_color_id)
    console.log(index, productMultipleSelection)
    if (index !== -1) {
      setProductMultipleSelection((prev) => {
        prev.splice(index, 1)
        return [...prev]
      })
    }
    else {
      setProductMultipleSelection(prev => [...prev, {
        product_color_id: item.product_color_id,
        product_color_code: item.product_color_code,
        product_color_name: item.product_color_name,
        lab: item.lab,
        rgb: item.rgb,
        texture_url: item.texture_url,
        count: 1,
      }])
    }
  }

  const handleClose = () => {
    onClose()
  }
  const handleAddProduct = () => {
    const index = multipleSelection.current.findIndex(mul => mul.product_id === currentSelect.current.id)
    if (index !== -1) {
      multipleSelection.current[index].multipleSelection = productMultipleSelection
    }
    else {
      multipleSelection.current.push({
        product_id: currentSelect.current.id,
        product_code_and_name: formatHashTag(currentSelect.current.code, currentSelect.current.name) as string,
        multipleSelection: productMultipleSelection,
      })
    }
    onClose()
  }
  const [productMultipleSelection, setProductMultipleSelection] = useState<SampleCuttingCache['multipleSelection']>([])

  return <View className={styles.main}>
    <View className={styles.search}>
      <Search placeholder="请输入搜索面料剪样" showBtn={false} changeOnSearch={getSearchData} >
        <View className={styles.search__cancel} onClick={handleCancel}>取消</View>
      </Search>
    </View>
    <View className={styles.context}>
      <InfiniteScroll
        statusMore={statusMore}
        selfonScrollToLower={getScrollToLower}
        refresherEnabled
        refresherTriggered={refresherTriggeredStatus}
        selfOnRefresherRefresh={getRefresherRefresh}
        safeAreaInsetBottom={false}
      >
        {
          orderList.list.map((item) => {
            return <View key={item.id} style={{ padding: '0 16px', backgroundColor: 'white' }}>
              <View className={styles.colorCard}>
                <View style={{ minWidth: '24%' }}>
                  <View className={styles.colorCard__image}>
                    <LabAndImg value={labAndImgObj(item)} />
                    {
                      item.is_multiple_product ? <View className={styles.imageTag}>24色</View> : null
                    }
                  </View>
                </View>
                <View className={styles.colorCard__content}>
                  <View className={styles.colorCard__title}>{formatHashTag(item.code, item.name)}</View>
                  <View className={styles.colorCard__code}>
                    <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.width}</Tag>
                    <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.weight_density}</Tag>
                  </View>
                  <View className={styles.colorCard__code}>
                    {item.component}
                  </View>
                </View>
                <View className={styles.addButton}>
                  <NormalButton
                    type="primary"
                    size="small"
                    customStyles={{ padding: '0 40rpx' }}
                    plain
                    round
                    onClick={() => handleClickAddButton(item)}
                  >
                    {
                      isAdd?.includes(item.id) || multipleSelection.current.some(mul => mul.product_id === item.id) ? '继续添加' : '添加'
                    }
                  </NormalButton>
                  {/* <MCheckbox
                    disabled={isAdd?.includes(item.id)}
                    status={isAdd?.includes(item.id) || item.status}
                    onSelect={() => onSelect(item)}
                    onClose={() => onUnSelect(item)}
                  /> */}
                </View>
              </View>
            </View>
          })
        }
      </InfiniteScroll>

    </View>
    <View className={styles.bottomBar}>
      <NormalButton
        customClassName={styles.bottomBar__button}
        type="primary"
        round
        disabled={multipleSelection.current.length === 0}
        onClick={handleSubmit}
      >
        {
          multipleSelection.current.length ? `确认（已选 ${multipleSelection.current.length} 个）` : '确认'
        }
      </NormalButton>

    </View>
    <Popup show={show} onClose={onClose} showTitle={false}>
      <View className={styles.collection_con}>
        <View className={styles.header}>
          <View className={styles.title}>{formatHashTag(currentSelect.current.code, currentSelect.current.name)}( {productList.length} )</View>
          <View className={styles.sub_title}>
            剪样大小为A4，大约22cm*30cm
          </View>
        </View>
        <View className={styles.productList}>
          {
            productList.map((item, index) => {
              const isChecked = productMultipleSelection.some(mul => mul.product_color_id === item.product_color_id)
              return <View key={index} className={styles.item} onClick={() => handleClickProductColor(item)}>
                <View className={classNames(styles.item_color, isChecked ? styles.productColorActive : null)}>
                  {
                    isChecked
                      ? <View className={styles.activeIcon}>
                        <IconFont name="icon-lujing" size={20} color="white"></IconFont>
                      </View>
                      : null
                  }
                  <LabAndImg
                    value={item}
                    round
                    name={formatRemoveHashTag(item.product_color_code)}
                  />
                </View>
                <View className={styles.item_name}>{item.product_color_name}</View>
              </View>
            })
          }
        </View>

      </View>
      <View className={classNames(styles.bottomBar, styles.popup_bottom)}>
        <NormalButton
          customClassName={styles.bottomBar__button}
          type="primary"
          round
          plain
          customStyles={{ width: '48%' }}
          onClick={handleClose}
        >
          取消
        </NormalButton>
        <NormalButton
          customClassName={styles.bottomBar__button}
          type="primary"
          round
          customStyles={{ width: '48%' }}
          disabled={productMultipleSelection.length === 0}
          onClick={handleAddProduct}
        >
          领取剪样（{productMultipleSelection.length}）
        </NormalButton>

      </View>
    </Popup>
  </View>
}
export default SampleCuttingList