/** @format */

import React, { useEffect, useState } from 'react';
import Block, { Input, ModalDropDown } from './style.js';
import {useColorConfig} from "../../storage/globalColorConfig"

const CallHistoryInputDropdown = ({
	inputValue,
	call_history,
	selectFunc,
	numberSelectHistory,
	setDefaultHistoryNumberHistory,
}) => {
	const [modal, setModal] = useState(false);
	var elem = document.getElementById('data');
	const useColorConfigStore = useColorConfig((store) => store)
	const selectFuncInset = (e) => {
		selectFunc(e);
		setModal(false);
	};

	useEffect(() => {
		if (call_history.length) {
			if (numberSelectHistory == 0 || numberSelectHistory == 'zero') {
				elem.scrollTop = elem.scrollHeight;
			} else {
				elem.scrollTop = elem.scrollHeight - numberSelectHistory * 55;
			}
		}
	}, [numberSelectHistory]);

	useEffect(() => {
		if (numberSelectHistory > 0) {
			setModal(true);
		} else if (numberSelectHistory == 0 || numberSelectHistory == 'zero') {
			// setModal(false);
		}
	}, [numberSelectHistory]);

	useEffect(() => {
		document
			.getElementById('numbersDiv')
			.scrollTo(document.getElementById('numbersDiv').scrollWidth, 0);
	}, [inputValue]);

	document.querySelector('body').addEventListener('click', function (e) {
		if (modal) setModal(false);
	});
	return (
		<Block>
			<Input
				onClick={() => {
					setDefaultHistoryNumberHistory();
					setModal(!modal);
				}}
				className='nocopy'
				type='text'>
				<p id='numbersDiv'>{inputValue}</p>
			</Input>
			{Boolean(call_history.length) && (
				<>
					<ModalDropDown visiblevalue={modal} switchAnim={useColorConfigStore.state.switchAnim} >
						<ModalDropDown.Inset id='data'>
							{call_history.reverse().map((value, index) => (
								<ModalDropDown.Item
									key={index}
									onClick={() => selectFuncInset(value.value)}
									hoverBool={
										call_history.length - numberSelectHistory === index
									}>
									{value?.value}
									<p className='itemTime'>{value?.time}</p>
								</ModalDropDown.Item>
							))}
						</ModalDropDown.Inset>
					</ModalDropDown>
				</>
			)}
		</Block>
	);
};

export default CallHistoryInputDropdown;
