/** @format */

import React, { useState } from 'react';
import DropDownStyle from './style';
import { Text, useTranslator } from '@eo-locale/react';
const DropDown = ({ reasons, reason, selectFunc }) => {
	const translator = useTranslator();
	const [visible, setVisible] = useState(0);
	document.querySelector('body').addEventListener('click', function (e) {
		if (Boolean(visible)) setVisible(0);
	});
	return (
		<DropDownStyle
			onClick={() => setVisible(visible ? 0 : 1)}
			className='nocopy'>
			<DropDownStyle.Text>
				{/* <Text id={reason.toUpperCase()} /> */}
				<span>{translator.translate('STATUS')}: </span>
				<span className='status'>
					<span>{translator.translate(reason.toUpperCase())}</span>
				</span>
				<span className='sfdsdfsd'></span>
			</DropDownStyle.Text>
			<DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}>
				{reasons.map((value, index) => (
					<div
						className='select'
						key={index}
						onClick={() => selectFunc(value)}
						style={{
							textOverflow: 'ellipsis',
							whiteSpace: 'nowrap',
							overflow: 'hidden',
							fontSize: '16px',
						}}>
						{translator.translate(value.toUpperCase())}
						{/* <Text id={value.toUpperCase()} /> */}
					</div>
				))}
			</DropDownStyle.DropDown>
			{/* <DropDownStyle.Window
				visiblevalue={visible}
				onClick={() => setVisible(0)}
			/> */}
		</DropDownStyle>
	);
};

export default DropDown;