import React from 'react'
import { ImagenesRutas } from '../request/RutasConfig.jsx';
import { cargarImagenPorDefecto } from '../components/Util/Util.jsx';

const ShorcutsSelectorItem = ({ item, ico, isFavorite, evalEditableMode, editableMode, saveToFavorites, removeFromFavorites, onDoubleClick }) => {

	const toggleFavorites = async (e) => {
		e.stopPropagation();
		isFavorite ? await removeFromFavorites() : await saveToFavorites()
	};

	return !editableMode ? <button
		id={`btn_${item.id}`}
		onMouseDown={evalEditableMode}
		onMouseUp={evalEditableMode}
		onTouchStart={evalEditableMode}
		onTouchEnd={evalEditableMode}
		onClick={(e) => onDoubleClick(e, item)}
		draggable={false}
		className='in'
	>
		<picture className={editableMode ? 'shake-it-baby' : ''}>
			<img
				src={ico}
				alt={item.name}
				onError={cargarImagenPorDefecto}
			/>
		</picture>
		<p>{item.name}</p>
	</button> : <div className='emulate-button' id={`btn_${item.id}`}
		draggable={true}
		onDragStart={((ev) => editableMode && ev.dataTransfer.setData("text", JSON.stringify(item)))}>
		<picture className={editableMode ? 'shake-it-baby' : ''}>
			<img
				src={ico}
				alt={item.name}
			/>
			<button onClick={toggleFavorites} className='fav-star'>
				<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'>
					<path fill='rgba(255,255,255,.7)' d='M0,0H17c7.18,0,13,5.82,13,13v21h-10C8.95,34,0,25.05,0,14V0H0Z' />
					<path fill={isFavorite ? '#0076ff' : '#fff'} d='M15.75,8.47l2.4,4.86,5.36,.78-3.88,3.78,.92,5.34-4.8-2.52-4.8,2.52,.92-5.34-3.88-3.78,5.36-.78,2.4-4.86Z' />
				</svg>
			</button>
		</picture>
		<p>{item.name}</p>
	</div>
}

export default ShorcutsSelectorItem