import { Input, ScrollView, Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import IconFont from '../iconfont/iconfont'
import Divider from '../divider'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import TextareaEnhance from '@/components/textareaEnhance'
import { CreateFavoriteApi, FavoriteListApi } from '@/api/favorite'
import { alert, goLink } from '@/common/common'
import { getFilterData } from '@/common/util'

// 原因选择
interface AddCollectionParam {
  show?: boolean // 显示
  onClose?: () => void // 关闭
  onAdd?: (val: any) => void
}
const AddCollection = (props: AddCollectionParam) => {
  const {
    show = false, onClose, onAdd,
  } = props
  // 获取列表
  const [list, setList] = useState<any[]>([])
  const { fetchData: fetchDataList } = FavoriteListApi()
  const getFavoriteList = async() => {
    const res = await fetchDataList(getFilterData())
    setList(() => res.data.list)
  }
  useEffect(() => {
    if (show) { getFavoriteList() }
  }, [show])
  const handleNewCollection = () => {
    // 新建收藏夹
    goLink('/pages/collection/collectionDetail/index', { title: '新建收藏夹', isEdit: false, editData: null })
  }
  return (
    <Popup show={show} onClose={onClose} showTitle title="加入收藏夹" >
      <Divider direction="horizontal" customStyles={{ marginTop: '0px', marginBottom: '12px' }}></Divider>
      <ScrollView className={styles.scrollStyle} scrollY>
        <View className={styles.collection_con}>
          {
            list.map((item, key) => (
              <>
                <View key={key} className={styles.collection_item} onClick={() => onAdd?.(item)}>
                  <View className={styles.collectionImage}></View>
                  <Text className={styles.text}>{item.name}</Text>
                </View>
                <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
              </>
            ))
          }
          <View className={styles.collection_item} onClick={handleNewCollection}>
            <View className={styles.collectionImage}>
              <IconFont name="icon-xinzengshoucangjia" size={40}></IconFont>
            </View>
            <Text className={styles.text}>新建收藏夹</Text>
          </View>
          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>

        </View>
      </ScrollView>
    </Popup>
  )
}

export default memo(AddCollection)
