/** @format */

import React, { useCallback, useEffect, useState } from 'react';
import WidjetBlock, {
	DialPadIcon,
	Input,
	ModalPhoneDropDowm,
	NumberButton,
} from './style';

import numbers from '../ModalPhoneNumpad/numbers';
import Modal from '../Modal';
import packageJson from '../../../package.json';

import CallIcon from '@mui/icons-material/Call';
import { toast } from 'react-hot-toast';
import DropDownTailwind from '../TailwindComponents/DropDown';
import TimerUi from '../TimerUi';

const WidjetButton = ({ version, timer, widjetState }) => {
	return (
		<>
			<WidjetBlock className='tailwindGlobalCss' id={'responsible-button'}>
				<ModalPhoneDropDowm
					hidden={!phoneModal}
					onClick={(e) => e.stopPropagation()}>
					<ModalPhoneDropDowm.InputArea>
						<Input disabled type='text' value={inputValue} />
						{inputValue.length ? (
							<Input.BackSpaceIcon
								onClick={() =>
									inputController({ type: 'delete', from: 'button' })
								}
							/>
						) : (
							''
						)}
					</ModalPhoneDropDowm.InputArea>
					<ModalPhoneDropDowm.ButtonArea>
						{numbers?.map((mapItem) => (
							<NumberButton
								key={mapItem.id}
								onClick={() => {
									mapItem.type === 'number' &&
										inputController({
											value: mapItem.value,
											type: 'add',
											from: 'button',
										});
								}}>
								{mapItem.nameNumber}
								<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
							</NumberButton>
						))}
						{!modalState.bool ? (
							<>
								<NumberButton style={{ gridColumn: '1/3' }}>
									<DropDownTailwind
										selectFunc={onSetDnd}
										reasons={data.reasons}
										reason={data.reason}
									/>
								</NumberButton>

								<NumberButton
									onClick={() => callButton()}
									// onClick={() => boxDialer.stopTimer()}
									status={dynamicValue}
									type={'call_button'}>
									<CallIcon />
								</NumberButton>
							</>
						) : (
							<>
								<div style={{ height: '33px' }}></div>
								<div style={{ height: '33px' }}></div>
							</>
						)}
					</ModalPhoneDropDowm.ButtonArea>
				</ModalPhoneDropDowm>
			</WidjetBlock>
			<Modal
				className='tailwindGlobalCss'
				callAnswerType={modalState.callType}
				hidden={
					modalState.bool
					// true
				}
				callType={
					modalState.callType
					// 'outcoming'
				}
				hangupButton={hangupButton}
				phoneNumber={
					modalState.callType === 'outcoming'
						? inputValue
						: modalState.callFromName
				}
			/>
		</>
	);
};
export default WidjetButton;