import { View } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import type { FC } from 'react'
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import ItemList from './components/shoppingCartItem/index'
import BottomSettleBar from './components/bottomSettleBar'
import BottomEditBar from './components/bottomEditBar'
import { ShoppingProvider } from './components/shoppingCart/index'
import type { Goods } from './context'
import { ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
import { formatPriceDiv } from '@/common/format'
import InfiniteScroll from '@/components/infiniteScroll'
import IconText from '@/components/iconText'
import Search from '@/components/search'
import { alert, goLink, isEmptyObject } from '@/common/common'

interface SearchOptions {
  short_name_or_phone?: string
}

const ShoppingCartContainer: FC = () => {
  const isFirst = useRef(true)

  const { isMultipleSelection, isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()

  const dispatch = useShoppingDispatch()

  // 管理
  const onStartToManage = () => {
    // if (isManageStatus) {
    //   handleSelectAllCheckbox(false) // 取消全选
    // }
    dispatch({ type: ShoppingDispatchType.UPDATE_MANAGE_STATUS, data: !isManageStatus })
  }

  const listHeightRef = useRef('auto')
  // 强制刷新
  const [, setForceUpdate] = useState({})

  const { fetchData, state } = ShoppingCartListApi()

  const [searchOptions, setSearchOptions] = useState<SearchOptions>({})

  useDidShow(() => {
    // 第二次进入该页面时触发
    if (!isFirst.current) {
      // 重新刷新
      // setShoppingCartData({ list: [], total: 0 })
      fetchData(getFilterData(searchOptions))
    }
  })

  useEffect(() => {
    console.log('useEffect fetchData', getFilterData(searchOptions))
    if (!isFirst.current) {
      fetchData(getFilterData(searchOptions))
    }
  }, [searchOptions])

  // 输入了搜索关键字
  const getSearchData = useCallback((e) => {
    console.log('getSearchData===>', e)
    setSearchOptions({ short_name_or_phone: e })
  }, [])

  const [shoppingCartData, setShoppingCartData] = useState<{
    list: ShoppingCartData[]
    total: number
  }>({ list: [], total: 0 })

  // 数据加载状态
  const statusMore = useMemo(() => {
    console.log('shoppingCartData==>', shoppingCartData, state)
    const status = dataLoadingStatus({
      list: shoppingCartData.list,
      total: shoppingCartData.total,
      status: state.loading!,
    })
    console.log('status==>', status)
    return status
  }, [shoppingCartData, state])

  // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
  useLayoutEffect(() => {
    (async() => {
      console.log('useLayoutEffect')
      await fetchData(getFilterData(searchOptions))
      isFirst.current = false
      const query = Taro.createSelectorQuery()
      console.log('query', query)
      query.select('#shoppingContainer').boundingClientRect()
      query.select('#topBar').boundingClientRect()
      query.select('#bottomBar').boundingClientRect()
      query.exec((res) => {
        console.log('res==>', res)
        const containerHeight = res[0].height
        const topBarHeight = res[1].height
        const bottomBarHeight = res[2].height
        const listHeight = containerHeight - topBarHeight - bottomBarHeight
        listHeightRef.current = `${listHeight}px`
        // 强制刷新
        setForceUpdate({})
      })
    })()
  }, [])

  useEffect(() => {
    if (state.success) {
      console.log('fetch success', state)
      setShoppingCartData({ list: state.data.list, total: state.data.total })
    }
  }, [state])

  // 结算
  const handleSettleAccount = debounce(() => {
    const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.multipleSelection
    if (!multipleSelection) { return alert.error('请先选择客户') }
    const checkedGoodsKind = Object.values(multipleSelection).reduce((prev, item: Goods) => {
      return [...prev, item.id]
    }, [])
    if (checkedGoodsKind.length === 0) { return alert.error('请先选择商品') }
    goLink('/pages/submitOrder/index', {
      purchaser_id: currentCheckedPurchaserId,
      sale_mode: currentCheckedSaleMode,
      shopping_cart_product_color_list: JSON.stringify(checkedGoodsKind),
      purchaser_name: shoppingCartData?.list.find(item => item.purchaser_id === currentCheckedPurchaserId)?.purchaser_name,
    })
  }, 400)

  const { fetchData: deleteApi } = ShoppingCartDeleteApi()

  // 批量某个客户的删除商品
  const handleDelete = async() => {
    const multipleSelection = colorStore?.[currentCheckedPurchaserId].multipleSelection
    const checked: Goods[] = Object.values(multipleSelection!)
    if (checked.length === 0) {
      return alert.error('请选择商品')
    }
    console.log('checked==>', checked)
    Taro.showModal({
      title: '要删除这些商品吗？',
      async success(res) {
        if (res.confirm) {
          alert.showLoading('删除中')
          const res = await deleteApi({
            ids: checked.map(item => item.id).join(','),
          })
          if (res.success) {
            alert.hideLoading()
            alert.success('删除成功')
            // 清空多选
            dispatch({
              type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
              data: {
                purchaserId: currentCheckedPurchaserId,
                goodsKind: colorStore?.[currentCheckedPurchaserId].goodsKind,
                multipleSelection: {},
              },
            })
            fetchData(searchOptions)
            // Observer.notify(currentCheckedPurchaserId)
          }
          else {
            alert.hideLoading()
            alert.none(res.msg)
          }
        }
      },
    })
  }
  // 全选
  const handleSelectAllCheckbox = (isSelectAll: boolean) => {
    const targetGoodsKind = colorStore?.[currentCheckedPurchaserId].goodsKind
    if (!targetGoodsKind) { return alert.error('请先选择客户') }

    const tempObject = { ...targetGoodsKind }
    dispatch({
      type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
      data: {
        purchaserId: currentCheckedPurchaserId,
        multipleSelection: isSelectAll ? tempObject : {},
      },
    })
  }

  // 加载刷新数据
  const [refreshStatus, setRefreshStatus] = useState(false)

  // 下拉刷新
  const handleRefresh = async() => {
    setRefreshStatus(true)
    const res = await fetchData(getFilterData(searchOptions))
    if (res.success) {
      setRefreshStatus(false)
      alert.success('刷新成功')
    }
    else {
      alert.error('刷新失败')
      setRefreshStatus(false)
    }
  }
  // const [isPending, startTransition] = useTransition()

  return (
    <View className={classnames('flex-col', styles.shopping)} id="shoppingContainer">
      <View className={styles['shopping--topBar']} id="topBar">
        <Search placeholder="请输入客户名称" showBtn={false} changeOnSearch={getSearchData}>
          <View className={styles.flexBox} onClick={onStartToManage}>
            {isManageStatus
              ? (
                <IconText svg iconName="icon-guanlidingdan" text="取消" color="#4581ff" customClass={styles['icon--manage--cancel']} />
              )
              : (
                <IconText svg iconName="icon-guanlidingdan" text="管理" />
              )}
          </View>
        </Search>
      </View>
      <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
        <View id="shoppingListContainer" className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
          <InfiniteScroll statusMore={statusMore} refresherEnabled selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
            {
              !!shoppingCartData?.list?.length
              && shoppingCartData?.list?.map((item, index) => {
                return <ItemList itemData={item} key={index}></ItemList>
              })
            }
          </InfiniteScroll>
        </View>
      </View>
      <View id="bottomBar">
        {isManageStatus
          ? (
            <BottomEditBar
              disabled={currentCheckedPurchaserId < 0}
              isSelectAll={isMultipleSelection}
              onDelete={handleDelete}
              onSelectCheckbox={isAll => handleSelectAllCheckbox(isAll)}
            ></BottomEditBar>
          )
          : (
            <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
          )}
      </View>
    </View>
  )
}
export const Shopping: FC = () => {
  // 计算总的预估金额
  const handleTriggerCheckbox = ({ multipleSelection, setSelectedAmount }) => {
    console.log('handleTriggerCheckbox==>', multipleSelection)

    if (multipleSelection) {
      const result = Object.values(multipleSelection).reduce((prev: number, value: Goods) => {
        return prev + Number(formatPriceDiv(value.estimate_amount))
      }, 0) as number
      // 同步修改上下文的 预估金额
      setSelectedAmount(result)
    }
    else {
      setSelectedAmount(0)
    }
  }
  return (
    <ShoppingProvider onTriggerCheckbox={handleTriggerCheckbox}>
      <ShoppingCartContainer />
    </ShoppingProvider>
  )
}

export default memo(Shopping)
