/** @format */

import React, { useState } from 'react';
import Block, { NumberButton } from './style';
import numbers from '../../lib/numbers';
import {useColorConfig} from "../../storage/globalColorConfig"
const ModalNumpad = ({ hidden }) => {
	const boxDialer = window.BoxDialer;
	const useColorConfigStore = useColorConfig((store) => store)
	const [dtmfValue, setDtmfValue] = useState('');
	const selectNumberType = (value) => {
		boxDialer.sipSendDTMF(value);
		if (dtmfValue.length > 10) {
			let sliceValue = (dtmfValue + value).slice(1);
			setDtmfValue(sliceValue);
		} else {
			setDtmfValue(dtmfValue + value);
		}
	};
	// 11
	return (
		<Block visiblevalue={hidden} switchAnim={useColorConfigStore.state.switchAnim}>
			<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
			{numbers?.map((mapItem) => (
				<NumberButton
					className='nocopy'
					key={mapItem.id}
					onClick={() => selectNumberType(mapItem.value)}>
					{mapItem.nameNumber}
					<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
				</NumberButton>
			))}
		</Block>
	);
};

export default ModalNumpad;
