import React, { useState, useContext, useEffect, useMemo } 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 { runState } = useContext(SocketContext);
	const [time, setTime] = useState([0, 0]);

	// console.clear();
	// console.log('>>>>>>>> runstate 更新 (', runState, ')');

	useEffect(() => {
		const restTime = 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);
		};
	}, [runState?.lastFireChangeTime, runState?.updateKey]);

	const lastFireChangeTime = {
		icon: icon3,
		label: '剩余时间',
		value: `${time[0]}分${time[1]}秒`,
	};

	const fireChangeTime = useMemo(() => {
		return runState?.fireChangeTime || '00:00';
	}, [runState?.fireChangeTime]);

	const fireDirection = useMemo(() => {
		// let lastValue = null;
		// if (runState?.fireDirection) {
		// 	lastValue = runState?.fireDirection;
		// }
		// console.log('换火方向： <', runState?.fireDirection, '>')
		return runState?.fireDirection || '南火';
	}, [runState?.fireDirection]);

	const data = [
		{
			icon: icon1,
			label: '换火时间',
			value: fireChangeTime,
		},
		lastFireChangeTime,
		{
			icon: icon2,
			label: '当前火向',
			value: 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;