import { Image, Text, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import dayjs from 'dayjs'
import styles from './index.module.scss'
import { formatImgUrl } from '@/common/format'
import { useTimeCountDown } from '@/use/useCommon'
import { ORDER_STATUS, PAYMENT_METHOD } from '@/common/enum'

interface List {
  status: string
  time: string
  tag: string
  desc: string
  expire_time: string
}

interface Param {
  onRefresh?: () => void
  orderInfo?: {
    logistics_details: List[] // 订单状态列表
    payment_method: number // 支付方式
    status: number // 订单状态
  }
}
const AdvanceOrderState = ({ orderInfo, onRefresh }: Param) => {
  const { showTime, onStart, timeStatus } = useTimeCountDown()

  // 订单状态枚举
  const { SaleorderstatusWaitingPrePayment } = ORDER_STATUS

  // 获取预付款最后时间
  const endTime = useMemo(() => {
    if (orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
      return orderInfo.logistics_details[0].expire_time
    }
    return ''
  }, [orderInfo])

  useEffect(() => {
    if (endTime) { onStart(endTime) }
  }, [endTime])

  useEffect(() => {
    if (timeStatus == 2) { onRefresh?.() }
  }, [timeStatus])

  return (
    <View className={styles.advance_main}>
      <View className={styles.time_con}>
        <View className={styles.times}>
          <Text className={styles.text}>剩</Text>
          <Text className={styles.num}>{showTime.HH}</Text>
          <Text className={styles.separate}>:</Text>
          <Text className={styles.num}>{showTime.MM}</Text>
          <Text className={styles.separate}>:</Text>
          <Text className={styles.num}>{showTime.SS}</Text>
        </View>
        <Text>等待买家付款，超时自动取消</Text>
      </View>
      <View className={styles.cardIcon}>
        <Image className={styles.image} src={formatImgUrl('/mall/my_cart.png')} />
      </View>
      <View className={styles.refresh} onClick={() => onRefresh?.()}>
        <Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
        <Text className={classnames(styles.refresh_text)}>刷新</Text>
      </View>
    </View>
  )
}
export default memo(AdvanceOrderState)