/** @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;