/** @format */

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

const CallHistoryInputDropdown = ({ inputValue, call_history, selectFunc }) => {
	const [modal, setModal] = useState(false);

	useEffect(() => {
		if (call_history.length) {
			var elem = document.getElementById('data');
			elem.scrollTop = elem.scrollHeight;
		}
	}, [call_history]);
	const selectFuncInset = (e) => {
		selectFunc(e);
		setModal(false);
	};
	return (
		<Block>
			<Input
				onClick={() => setModal(!modal)}
				className='nocopy'
				type='text'
				value={inputValue}>
				{inputValue}
			</Input>
			{Boolean(call_history.length) && (
				<>
					<ModalDropDown visiblevalue={modal}>
						<ModalDropDown.Inset id='data'>
							{call_history.reverse().map((value, index) => (
								<p
									className='item'
									key={index}
									onClick={() => selectFuncInset(value)}>
									{value}
								</p>
							))}
						</ModalDropDown.Inset>
					</ModalDropDown>
					<ModalDropDown.FullWindow
						visiblevalue={modal}
						onClick={() => setModal(!modal)}
					/>
				</>
			)}
		</Block>
	);
};

export default CallHistoryInputDropdown;