index.jsx 1.99 KB
Newer Older
Muhammadali's avatar
Muhammadali committed
1 2 3 4 5
/** @format */

import React from 'react';
import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi';
Muhammadali's avatar
Muhammadali committed
6
import { Text, useTranslator } from '@eo-locale/react';
Muhammadali's avatar
Muhammadali committed
7
import {useColorConfig} from "../../storage/globalColorConfig"
Muhammadali's avatar
Muhammadali committed
8
// import {useConfig} from "../../storage"
Muhammadali's avatar
Muhammadali committed
9 10 11 12 13 14 15 16 17
const BxMiniWidjetUi = ({
	widjetState,
	phoneNumber,
	reason,
	widjetVersion,
	leftTime,
	onClick,
	position,
}) => {
Muhammadali's avatar
Muhammadali committed
18
	const translator = useTranslator();
Muhammadali's avatar
Muhammadali committed
19
	const useColorConfigStore = useColorConfig((store) => store)
Muhammadali's avatar
Muhammadali committed
20
	// const {state, setState} = useConfig((state) => state)
Muhammadali's avatar
Muhammadali committed
21 22
	const colorTypeFunc = ({ widjetState, reason }) => {
		switch (`${widjetState}_${reason}`) {
Muhammadali's avatar
Muhammadali committed
23
			case ('pending_undefined', 'pending_free'):
Muhammadali's avatar
Muhammadali committed
24 25 26 27 28
				return {
					backgroundColor: 'gray',
					color: '#fff',
				};
				break;
Muhammadali's avatar
Muhammadali committed
29 30 31 32
			case 'connected_free':
				return {
					backgroundColor: 'green',
				};
Muhammadali's avatar
Muhammadali committed
33 34 35
				break;
			default:
				return {
Muhammadali's avatar
Muhammadali committed
36
					backgroundColor: 'orange',
Muhammadali's avatar
Muhammadali committed
37 38 39 40
				};
				break;
		}
	};
Muhammadali's avatar
Muhammadali committed
41
	// useColorConfigStore.state.sizePixel
Muhammadali's avatar
Muhammadali committed
42

Muhammadali's avatar
Muhammadali committed
43 44
	return (
		<BxMiniWidjetUiStyle
Muhammadali's avatar
Muhammadali committed
45 46
			// status={widjetState || ''}
			status={colorTypeFunc({ reason, widjetState })}
Muhammadali's avatar
Muhammadali committed
47
			onClick={onClick}
Muhammadali's avatar
Muhammadali committed
48
			sizePixel={useColorConfigStore.state.sizePixel}
Muhammadali's avatar
Muhammadali committed
49 50 51
			position={position}>
			<div className='left'>
				<p className='title'>{phoneNumber}</p>
Muhammadali's avatar
Muhammadali committed
52
				<div>
Muhammadali's avatar
Muhammadali committed
53 54 55 56
					{reason !== 'free' ? (
						<TimerUi reason={reason} time={leftTime} />
					) : (
						<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
Muhammadali's avatar
Muhammadali committed
57
							<span>{translator.translate(reason)}</span>
Muhammadali's avatar
Muhammadali committed
58 59
						</BxMiniWidjetUiStyle.ReasonTest>
					)}
Muhammadali's avatar
Muhammadali committed
60
				</div>
Muhammadali's avatar
Muhammadali committed
61 62
			</div>
			<div className='bottom'>
Muhammadali's avatar
Muhammadali committed
63 64
				<BxMiniWidjetUiStyle.StatusLine
					status={colorTypeFunc({ reason, widjetState }) || ''}>
Muhammadali's avatar
Muhammadali committed
65 66 67
					{
						typeof useColorConfigStore.state.showVersion === 'undefined' ? <p className='verison'>v {widjetVersion}</p> : useColorConfigStore.state.showVersion && <p className='verison'>v {widjetVersion}</p>
					}
Muhammadali's avatar
Muhammadali committed
68 69 70 71 72 73 74
				</BxMiniWidjetUiStyle.StatusLine>
			</div>
		</BxMiniWidjetUiStyle>
	);
};

export default BxMiniWidjetUi;