import {FC, useEffect, useState} from 'react';
import fontLogoIcon from '@assets/images/screen/logoName.webp';
import css from './index.module.css';
import logoIcon from '@assets/images/screen/logo.webp';
import dayjs from 'dayjs';
import classNames from 'classnames';
import {useFullscreen} from 'ahooks';

const weeks = [
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
];

const Header: FC = function () {
  const [time, setTime] = useState(dayjs().format('HH:mm:ss'));

  useEffect(function () {
    const timer = setInterval(function () {
      setTime(dayjs().format('HH:mm:ss'));
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const [, {toggleFullscreen}] = useFullscreen(document.body);

  return (
    <header className={css.header}>
      <img
        src={fontLogoIcon}
        alt='logo'
        className={css.logo}
        onClick={toggleFullscreen}
      />

      <h1 className={css.title}>
        <img src={logoIcon} alt='logo' />
        <span>采购收货大数据展示平台</span>
      </h1>

      <section className={css.dateGroup}>
        <b className={classNames(css.date, css.dateBg)}>
          {dayjs().format('YYYY年MM月DD日')} {weeks[dayjs().get('d')]}
        </b>
        <i className={classNames(css.time, css.dateBg)}>{time}</i>
      </section>
    </header>
  );
};

export default Header;
