/** @format */

import _ from 'lodash';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

import styles from './index.less';

interface TimerProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const Timer = (props: TimerProps) => {
  const { size, boxStyle, timerStyle, dateStyle } = props;
  const [time, setTime] = useState(moment().format('HH:mm:ss'));

  const styleBase = {
    height: 37,
    width: 120,
  };
  const timerBase = {
    color: '#fff',
    fontSize: 18,
    lineHeight: 1,
  };
  const dateBase = {
    color: '#fff',
    fontSize: 12,
    lineHeight: 1,
  };

  const style = _.merge(styleBase, size, boxStyle);
  const timerStyles = _.merge(timerBase, timerStyle);
  const dateStyles = _.merge(dateBase, dateStyle);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(moment().format('HH:mm:ss'));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div style={style} className={styles.time}>
      <div>
        <p className={styles.timer} style={timerStyles}>
          {time}
        </p>
        <p className={styles.date} style={dateStyles}>
          {moment().format('YYYY.MM.DD')}
        </p>
      </div>
    </div>
  );
};

export default Timer;