/** @format */

import React from 'react';
import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi';
import { Text, useTranslator } from '@eo-locale/react';
import {useColorConfig} from "../../storage/globalColorConfig"
// import {useConfig} from "../../storage"
const BxMiniWidjetUi = ({
	widjetState,
	phoneNumber,
	reason,
	widjetVersion,
	leftTime,
	onClick,
	position,
}) => {
	const translator = useTranslator();
	const useColorConfigStore = useColorConfig((store) => store)
	// const {state, setState} = useConfig((state) => state)
	const colorTypeFunc = ({ widjetState, reason }) => {
		switch (`${widjetState}_${reason}`) {
			case ('pending_undefined', 'pending_free'):
				return {
					backgroundColor: 'gray',
					color: '#fff',
				};
				break;
			case 'connected_free':
				return {
					backgroundColor: 'green',
				};
				break;
			default:
				return {
					backgroundColor: 'orange',
				};
				break;
		}
	};
	// useColorConfigStore.state.sizePixel

	return (
		<BxMiniWidjetUiStyle
			// status={widjetState || ''}
			status={colorTypeFunc({ reason, widjetState })}
			onClick={onClick}
			sizePixel={useColorConfigStore.state.sizePixel}
			position={position}>
			<div className='left'>
				<p className='title'>{phoneNumber}</p>
				<div>
					{reason !== 'free' ? (
						<TimerUi reason={reason} time={leftTime} />
					) : (
						<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
							<span>{translator.translate(reason)}</span>
						</BxMiniWidjetUiStyle.ReasonTest>
					)}
				</div>
			</div>
			<div className='bottom'>
				<BxMiniWidjetUiStyle.StatusLine
					status={colorTypeFunc({ reason, widjetState }) || ''}>
					{
						typeof useColorConfigStore.state.showVersion === 'undefined' ? <p className='verison'>v {widjetVersion}</p> : useColorConfigStore.state.showVersion && <p className='verison'>v {widjetVersion}</p>
					}
				</BxMiniWidjetUiStyle.StatusLine>
			</div>
		</BxMiniWidjetUiStyle>
	);
};

export default BxMiniWidjetUi;