import { Text, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
import type { StateType } from '@/context/ContextShop'
import { useCurrenShop } from '@/context/ContextShop'
import { formatPriceDiv } from '@/common/fotmat'
import type { saleModeType } from '@/common/enum'

interface ParamType {
  onSelect?: (val: boolean) => void
  onBtnClick?: (val: boolean) => void
  model: boolean
}

type IndexType = {
  onSelect?: (val: boolean) => void
  statistics?: StateType['statistics']
  sale_mode?: saleModeType
}&ParamType

export default (props: ParamType) => {
  const { onSelect, model, onBtnClick } = props
  const { state, dispatch } = useCurrenShop()
  return <Index onSelect={onSelect} statistics={state.statistics} model={model} onBtnClick={onBtnClick} sale_mode={state.sale_mode} />
}

const Index = memo((props: IndexType) => {
  const { onSelect, statistics, model, sale_mode } = props
  const [status, setStatus] = useState(false)
  const getSelect = (status) => {
    setStatus(() => status)
    onSelect?.(status)
  }
  useEffect(() => {
    setStatus(false)
  }, [sale_mode])
  const count = useMemo(() => {
    return sale_mode === 0
      ? `已选${statistics?.product_number}种面料,${statistics?.color_number}个颜色,共${statistics?.roll_number}条`
      : `已选${statistics?.product_number}种面料,${statistics?.color_number}个颜色,共${(statistics?.length_number || 0) / 100}米`
  }, [statistics])

  const onBtnClick = () => {
    props.onBtnClick?.(model)
  }
  return <View className={styles.Settlement_btn}>
    <MCheckbox status={status} onSelect={() => getSelect(true)} onClose={() => getSelect(false)} />
    <Text className={styles.select_text} >全选</Text>
    <View className={styles.price_count}>
      {!model && <>
        <View className={styles.price}>
          <Text>预估金额:</Text>
          <Text>￥{formatPriceDiv(statistics?.price_number)}</Text>
        </View>
        <View className={styles.count}>{count}</View>
      </>}
    </View>
    <View onClick={onBtnClick} className={classNames(styles.btn, model && styles.del)}>{!model ? '结算' : '删除'}</View>
  </View>
})
