/** @format */

import React, { useState } from 'react';
import Block from './style';
import { data as mockData } from '../ModalPhoneNumpad/mockTest';

const CallCardDropDown = ({ hiddenState, selectUserFunc }) => {
	const [inputValue, setinputValue] = useState('');
	return (
		<Block onClick={(e) => e.stopPropagation()} hiddenState={hiddenState}>
			<Block.Input
				placeholder='Search'
				hiddenState={hiddenState}
				onChange={(e) => setinputValue(e.target.value)}
			/>
			<Block.Inset hiddenState={hiddenState}>
				{mockData.map(
					({ NAME, UF_PHONE_INNER, LAST_NAME }, index) =>
						(NAME.toLocaleLowerCase().includes(
							inputValue.toLocaleLowerCase(),
						) ||
							LAST_NAME.toLocaleLowerCase().includes(
								inputValue.toLocaleLowerCase(),
							) ||
							UF_PHONE_INNER.toString().includes(inputValue.toString())) && (
							<Block.Section
								key={index}
								onClick={() => selectUserFunc(UF_PHONE_INNER)}>
								<p className='name'>
									{NAME} {LAST_NAME}
								</p>
								<p className='phone_number'>{UF_PHONE_INNER}</p>
							</Block.Section>
						),
				)}
			</Block.Inset>
		</Block>
	);
};

export default CallCardDropDown;