import { Text, View } from '@tarojs/components'
import { ShoppingDispatchType, useShoppingDispatch } from '../../context'
import styles from './index.module.scss'
import NormalButton from '@/components/normalButton'
import MCheckbox from '@/components/checkbox'
import { usePropsValue } from '@/use/useCommon'

interface PropsType {
  onDelete?: Function
  onSelectCheckbox?: (bool: boolean) => void
  disabled?: boolean
  isSelectAll?: boolean
}
const BottomEditBar = (props: PropsType) => {
  const { onDelete, onSelectCheckbox, disabled = false, isSelectAll: selectAll = false } = props
  const dispatch = useShoppingDispatch()
  console.log('isSelectAll==>', selectAll)
  const handleDelete = () => {
    onDelete && onDelete()
  }

  const selectCallBack = () => {
    onSelectCheckbox && onSelectCheckbox(true)
    dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: true })
  }
  const closeCallBack = () => {
    dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: false })
    onSelectCheckbox && onSelectCheckbox(false)
  }

  const [isSelectAll, setSelectAll] = usePropsValue({
    value: selectAll,
    defaultValue: false,
  })

  return (
    <View className={styles.bottomBar}>
      <View className={styles.bottomLeft}>
        <MCheckbox
          status={isSelectAll}
          disabled={disabled}
          round
          size="small"
          onSelect={selectCallBack}
          onClose={closeCallBack}
          customStyles={{ color: '$color: #000000, $alpha: 0.6' }}
        >
          全选
        </MCheckbox>
      </View>
      <View className={styles.bottomRight}>
        <NormalButton round type="danger" size="normal" onClick={handleDelete} customStyles={{ backgroundColor: '#F44761', padding: '0 80rpx' }}>
          <Text style={{ fontSize: '32rpx' }}>删除</Text>
        </NormalButton>
      </View>
    </View>
  )
}

export default BottomEditBar
