import React, { useState, useContext, useEffect } from 'react';
import SocketContext from '../../../store/socket-data-provider';
import icon1 from '@/assets/CenterChart2icon1.svg';
import icon2 from '@/assets/CenterChart2icon2.svg';
import icon3 from '@/assets/CenterChart2icon3.svg';
import icon4 from '@/assets/CenterChart2icon4.svg';

import cls from './leftbox.module.less';

const Chart2 = () => {
	const ctx = useContext(SocketContext);
	let [time, setTime] = useState([0, 0]);

	useEffect(() => {
		const restTime = ctx.runState?.lastFireChangeTime;
		if (restTime == null) return;
		console.log('restTime is:', restTime);
		let timer = null;
		if (/分/.test(restTime) && /秒/.test(restTime)) {
			let [min, sec] = restTime.replace(/分/, ':').replace(/秒/, '').split(':');
			timer = setInterval(() => {
				if (Number(sec) === 0 && Number(min) === 0) {
					clearInterval(timer);
					return;
				}
				if (Number(sec) === 0) {
					sec = 59;
					min--;
				} else {
					sec--;
				}
				setTime([min, sec]);
			}, 1000);
		} else if (/分/.test(restTime)) {
			let sec,
				min = restTime.replace(/分/, ':');
			sec = 0;

			timer = setInterval(() => {
				if (Number(sec) === 0 && Number(min) === 0) {
					clearInterval(timer);
					return;
				}
				if (Number(sec) === 0) {
					sec = 59;
					min--;
				} else {
					sec--;
				}
				setTime([min, sec]);
			}, 1000);
		} else if (/秒/.test(restTime)) {
			let min,
				sec = restTime.replace(/秒/, '');
			min = 0;

			timer = setInterval(() => {
				if (Number(sec) === 0 && Number(min) === 0) {
					clearInterval(timer);
					return;
				}
				if (Number(sec) === 0) {
					sec = 59;
					min--;
				} else {
					sec--;
				}
				setTime([min, sec]);
			}, 1000);
		}
		return () => {
			clearInterval(timer);
		};
	}, [ctx.runState?.lastFireChangeTime]);

	const data = [
		{
			icon: icon1,
			label: '换火时间',
			value: ctx.runState?.fireChangeTime || '00:00',
		},
		{
			icon: icon3,
			label: '剩余时间',
			value: `${time[0]}分${time[1]}秒`,
		},
		{
			icon: icon2,
			label: '当前火向',
			value: ctx.runState?.fireDirection || '东火',
		},
	];

	return (
		<div className={`${cls.leftbox} flex h-half`}>
			{data.map((item) => (
				<div className={cls.box} key={item.label}>
					<img src={item.icon} alt="Error" className="box__logo" />
					<div className={cls.box__inner}>
						<h2 className={cls.box__label}>{item.label}</h2>
						<h2 className={cls.box__value}> {item.value}</h2>
					</div>
				</div>
			))}
		</div>
	);
};

export default Chart2;