import Taro, { Events, useDidShow } from '@tarojs/taro'
import { Text, View } from '@tarojs/components'
import type { ITouchEvent } from '@tarojs/components'
import classnames from 'classnames'
import type { SetStateAction } from 'react'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Product, { ProductItem } from './components/productItem'
import styles from './index.module.scss'
import MoveCollectionPopup from './components/moveCollectionPopup'
import InfiniteScroll from '@/components/infiniteScroll'
import MCheckbox from '@/components/checkbox/index'
import Search from '@/components/searchBar'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import { alert, goLink } from '@/common/common'
import { DelFavoriteProductApi, FavoriteListApi } from '@/api/favorite'
import useLogin from '@/use/useLogin'
import IconText from '@/components/iconText'
import LayoutBlock from '@/components/layoutBlock'
import IconFont from '@/components/iconfont/iconfont'
import NormalButton from '@/components/normalButton'
import Empty from '@/components/empty'
import { COLLECTION_EMPTY_IMAGE } from '@/common/constant'
// 消息机制
export const collectionEvents = new Events()
// 勾选map
export type CheckedMap = Record<number, Record<number, boolean>>

interface CollectionItemPropsType {
  selectId: number
  item?: any
  isManageStatus: boolean
  checkedMap: CheckedMap
  onCheckedChange: (id: number, item: CollectionItemPropsType['item'], checked: boolean) => void
  filterChecked: (currentId: number, filter?: () => boolean) => number[]
}
const CollectionItem = (props: CollectionItemPropsType) => {
  const {
    item, isManageStatus, selectId, onCheckedChange, filterChecked, checkedMap,
  } = props

  // 控制下拉上拉
  const [isOpen, setOpen] = useState(false)
  const changeOpenCon = () => {
    // 更新当前选中的收藏夹
    collectionEvents.trigger('updateCurrentSelection', item.id)
    setOpen(e => !e)
  }

  // 编辑
  const handleEditCollection = (e: ITouchEvent, item: any) => {
    e.stopPropagation()
    const editData = {
      id: item.id,
      name: item.name,
      remark: item.remark,
      is_top: item.is_top,
    }
    goLink('/pages/collection/collectionDetail/index', { title: '编辑收藏夹', isEdit: true, editData: JSON.stringify(editData) })
  }

  useEffect(() => {
    console.log('selectId && item.id', selectId, item.id, isManageStatus)
    if (selectId !== item.id && isManageStatus) {
      setOpen(false)
    }
  }, [isManageStatus, selectId])

  return <LayoutBlock circle customClassName={styles.layout} onClick={changeOpenCon}>
    <View className={styles.class_item}>
      <View key={item.id} className={styles.class_title}>
        <View className={styles.class_prefix}>
          <View className={styles.class_prefix_top}>
            <View className={styles.title}>{item.name}
              <Text className={styles.fg}>（</Text>
              <Text className={styles.num}>{item.product_color_list?.length || 0}</Text>
              <Text className={styles.fg}>）</Text>
            </View>
            {/* is_top === 3 代表该收藏夹是默认收藏夹 */}
            {
              item.is_top !== 3 && <View onClick={e => handleEditCollection(e, item)}>
                <IconFont name="icon-bianji" size={36}></IconFont>
              </View>
            }
          </View>
          <View className={styles.class_prefix_bottom}>
            <Text>{item.remark}</Text>
          </View>
        </View>
        <IconFont name="icon-shangla" size={36} customClassName={classnames(isOpen ? styles.iconfont_show : styles.iconfont_hide)}></IconFont>
        <IconFont name="icon-xiala" size={36} customClassName={classnames(!isOpen ? styles.iconfont_show : styles.iconfont_hide)}></IconFont>
      </View>
      <View className={styles.class_con} style={isOpen ? { maxHeight: `${10 * 260}rpx` } : { maxHeight: 0 }} >
        <View className={styles.products_list}>
          {item.product_color_list?.map((subItem: any) => {
            return <ProductItem checked={checkedMap?.[item.id]?.[subItem.product_id]} onCheckedChange={onCheckedChange} filterChecked={filterChecked} metaDataId={item.id} event={collectionEvents} item={subItem} key={subItem.product_id} openCheckBox={isManageStatus} />
          })}
        </View>
      </View>
    </View>
  </LayoutBlock>
}
const CollectionItemWithMemo = memo(CollectionItem)
/**
 * *******************
 * *   收藏夹页面本体   *
 * *******************
 */
const Collection = () => {
  useLogin()

  // 获取搜索数据
  const [searchData, setSearchData] = useState('')
  // 是否首次进入
  const isFirst = useRef(true)
  const onSearch = useCallback(debounce((e) => {
    setSearchData(() => e)
  }, 400), [])

  // 获取列表
  const { fetchData: fetchDataList, state: favoriteState } = FavoriteListApi()
  const [favoriteData, setFavoriteData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
  // 获取列表
  const getFavoriteList = async() => {
    const res = await fetchDataList(getFilterData({ name: searchData }))
    setFavoriteData({ list: res.data.list, total: res.data.total })
  }
  // 当前选中的收藏夹
  const [currentSelection, setCurrentSelection] = useState<number>(0)
  // 更新当前选中的收藏夹的id
  const updateCurrentSelection = (current) => {
    console.log('updateCurrentSelection current', current)
    setCurrentSelection(current)
  }
  // ---------勾选逻辑---------
  const [checkedMap, setCheckedMap] = useState<CheckedMap>({})

  const onCheckedChange = (id: number, itemId: number, checked: boolean) => {
    console.log('onCheckedChange', itemId, checked)
    const newCheckedMap = Object.assign({}, checkedMap, {
      [id]: {
        ...checkedMap[id],
        [itemId]: checked,
      },
    })
    setCheckedMap(newCheckedMap)
  }
  // 过滤符合勾选条件的数据
  const filterChecked = (id: number, filter?: () => boolean) => {
    if (!id) { return }
    if (!checkedMap[id]) {
      checkedMap[id] = {}
    }
    console.log('filterChecked', checkedMap[id])
    const checkedSelections = Object.entries(checkedMap[id])
    // 通过这个filter 筛选出所有checked状态为true的项
    const filteredWithId = checkedSelections.filter(entries => Boolean(entries[1])).map(([checkedId]) => Number(checkedId))
    const currentCollectionItem = favoriteData.list.find(item => item.id === id)
    console.log(filteredWithId, currentCollectionItem)
    const filtered = currentCollectionItem.product_color_list?.filter(({ product_id }) => filteredWithId.includes(product_id)) || []
    return filter ? filtered.filter(filter) : filtered
  }
  // ---------勾选逻辑---------
  useDidShow(() => {
    getFavoriteList()
    isFirst.current = false
  })

  useEffect(() => {
    if (!isFirst.current) {
      getFavoriteList()
    }
  }, [searchData, isFirst.current])

  const contentHeightWithBottomBar = useRef<string>('auto')
  const [contentStyleObject, setContentStyleObject] = useState<React.CSSProperties>({ height: 'auto' })
  // 获取显示底部全选栏时 content的高度
  const handleLayout = () => {
    const query = Taro.createSelectorQuery()
    query.select('#bottomBar').boundingClientRect()
    query.select('#scrollContent').boundingClientRect()
    query.exec((res) => {
      console.log('res', res)
      const bottomBarHeight = res[0].height
      const contentHeight = res[1].height
      contentHeightWithBottomBar.current = `${contentHeight - bottomBarHeight}px`
    })
  }

  useEffect(() => {
    handleLayout()
  }, [])

  // 消息机制
  useEffect(() => {
    collectionEvents.on('updateCurrentSelection', updateCurrentSelection)
    return () => {
      collectionEvents.off('updateCurrentSelection', updateCurrentSelection)
    }
  })

  const multipleSelection = useMemo(() => {
    const selections = filterChecked(currentSelection)
    console.log('selections', selections)
    if (selections && selections.length !== 0) {
      return selections.map(item => item.product_id)
    }
    else {
      return []
    }
  }, [checkedMap, filterChecked])

  // 取消收藏
  const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi()
  const onDelCollection = async() => {
    if (multipleSelection.length == 0) { return alert.none('请选择要取消面料') }
    const showModalRes = await Taro.showModal({
      title: '是否要取消收藏',
      confirmText: '是',
      cancelText: '否',
    })
    if (showModalRes.confirm) {
      const res = await delFavoriteProductFetchData({ favorite_id: currentSelection, product_id: multipleSelection })
      if (res.success) {
        getFavoriteList()
        alert.none('已取消收藏')
      }
    }
  }

  const [isManageStatus, setManageStatus] = useState(false)
  // const [isSelectAll, setSelectAll] = useState(false)
  // 全选
  const isSelectAll = useMemo(() => {
    const product_color_list = favoriteData.list.find(item => item.id === currentSelection)?.product_color_list || []
    return product_color_list.length !== 0 && filterChecked(currentSelection).length === product_color_list.length
  }, [currentSelection, favoriteData.list, filterChecked])
  // 全选和反选的函数
  const onCheckedAllChange = (checkedAll: boolean) => {
    const product_color_list = favoriteData.list.find(item => item.id === currentSelection).product_color_list
    const newCheckedMap: CheckedMap = JSON.parse(JSON.stringify((checkedMap)))
    product_color_list.forEach((item) => {
      newCheckedMap[currentSelection][item.product_id] = checkedAll
    })
    console.log('newCheckedMap==+>', newCheckedMap)
    setCheckedMap(newCheckedMap)
  }
  // 点击管理
  const onStartToManage = () => {
    setManageStatus((isManageStatus) => {
      // 控制动画效果
      if (isManageStatus) {
        setContentStyleObject({ height: 'auto', flex: '1 1 auto' })
      }
      else {
        setContentStyleObject({
          flex: 'unset',
          height: `${contentHeightWithBottomBar.current}`,
        })
      }
      return !isManageStatus
    })
  }

  // 新建收藏夹
  const handleAddNewCollection = () => {
    goLink('/pages/collection/collectionDetail/index', { title: '新建收藏夹', isEdit: false, editData: null })
  }

  const [showMovePopup, setShowMovePopup] = useState(false)
  const closeMovePopup = useCallback(() => {
    setShowMovePopup(false)
  }, [])
  // 移动到
  const handleMultipleMove = () => {
    setShowMovePopup(true)
  }
  // 删除
  const handleMultipleDelete = () => {
    onDelCollection()
  }
  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: favoriteData.list, total: favoriteData.total, status: favoriteState.loading })
  }, [favoriteState, favoriteData])
  return (
    <View className={styles.collection_main}>
      <View className={styles.collection_content} >

        <View className={styles.search}>
          <Search showBtn={false} changeOnSearch={onSearch} placeholder="请输入面料关键词" >
            <View className={styles.flexBox} onClick={onStartToManage}>
              {isManageStatus
                ? (
                  <IconText svg iconName="icon-guanli" text="退出" color="#4581ff" customClass={styles['icon--manage--cancel']} />
                )
                : (
                  <IconText svg iconName="icon-guanli" text="管理" />
                )}
            </View>
          </Search>
        </View>
        <LayoutBlock circle customClassName={styles.layout} onClick={handleAddNewCollection}>
          <View className={styles.layoutBlock}>
            <IconFont customClassName={styles.icon} name="icon-shoucangjia" size={60} ></IconFont>
            <Text className={styles.content}>点击新建收藏夹</Text>
          </View>
        </LayoutBlock>
        <View className={styles.scrollContent} id="scrollContent" style={contentStyleObject}>
          <InfiniteScroll
            statusMore={statusMore}
            emptySlot={<Empty picUrl={COLLECTION_EMPTY_IMAGE} text="暂无数据" />}
          >
            {favoriteData.list?.map((item: any, key) =>
              (
                <CollectionItemWithMemo checkedMap={checkedMap} onCheckedChange={onCheckedChange} filterChecked={filterChecked} selectId={currentSelection} key={key} item={item} isManageStatus={isManageStatus} />
              ),
            )}
          </InfiniteScroll>
        </View>
      </View>
      <View className={classnames(styles.bottomBar, isManageStatus ? styles.showBottomBar : '')} id="bottomBar">
        <View className={styles.bottomLeft}>
          <MCheckbox
            status={isSelectAll}
            round
            size="small"
            onSelect={() => onCheckedAllChange(true)}
            onClose={() => onCheckedAllChange(false)}
            customClassName={styles.multipleCheckbox}
            customTextClass={styles.multipleCheckbox__text}
          >
          全选
          </MCheckbox>
        </View>
        <View className={styles.bottomRight}>
          <NormalButton type="danger" plain round size="normal" onClick={handleMultipleMove} customStyles={{ padding: '0 50rpx', margin: '0 40rpx' }}>
            <Text style={{ fontSize: '30rpx' }}>移动到</Text>
          </NormalButton>
          <NormalButton type="danger" round size="normal" onClick={handleMultipleDelete} customStyles={{ padding: '0 60rpx' }}>
            <Text style={{ fontSize: '30rpx' }}>删除</Text>
          </NormalButton>
        </View>
      </View>
      <MoveCollectionPopup onSuccess={getFavoriteList} collectionList={favoriteData.list} show={showMovePopup} onClose={closeMovePopup} ids={multipleSelection} sourceId={currentSelection} />
    </View>
  )
}
export default Collection