import * as React from 'react'
import Countdown from 'react-countdown';
import { BaseComponent,handleComponentClickLog } from '../base-component'
import { padding } from '../utils/format';

import {
  Props,
  State,
} from './type'

import { rem } from "../style/function.style";
import * as Styled from './index.style'

enum StatusMap {
  已删除 = -2,
  已过期,
  领取,
  已领取,
}
export class CountDown extends React.Component<Props, State> {
  static defaultProps = new Props()

  state = new State()

  render() {
    const { style, backgroundColor, clockBackgroundColor, fontColor, time } = this.props;
    console.log('CountDown', style, backgroundColor, time);
    return (
      <div style={{
        ...style,
        width: rem(416),
        height: rem(92),
      }}>
        <BaseComponent {...this.props}>
          <Countdown
            date={time || Date.now() + 10000}
            intervalDelay={0}
            renderer={props => (
              props.completed ? 
              null
              :
              <Styled.Container backgroundColor={backgroundColor} clockBackgroundColor={clockBackgroundColor} fontColor={fontColor}>
                <div className="item">{props.days}<span className="unit">天</span></div>
                <div className="item">{padding(props.hours)}<span className="unit">小时</span></div>
                <div className="item">{padding(props.minutes)}<span className="unit">分</span></div>
                <div className="item">{padding(props.seconds)}<span className="unit">秒</span></div>
              </Styled.Container>
            )}
          >
            {
              null
            }
          </Countdown>
        </BaseComponent>
      </div>
    )
  }
}