import styles from './MapItem.module.css';
import { Component } from "solid-js";
import { Group, Map, api } from "../api";
import { showDialog, showMessageDialog } from "../state";
import { errorToString } from "../util";
import { BsTrash } from 'solid-icons/bs';

export interface MapItemProps {
	group: Group,
	map: Map,
	onDelete: (m: Map) => void
}

const MapItem: Component<MapItemProps> = (props) => {

	const deleteMap = async () => {
		showDialog({
			title: 'Remove map',
			text: 'Do you want to remove this map?',
			buttons: [
				{
					name: 'Remove',
					type: 'danger',
					closeOnClick: true,
					action: async () => {
						try {
							await api().removeMap(props.group.id, props.map.id);
							props.onDelete(props.map);
						} catch (e) {
							showMessageDialog('Failed to remove map', errorToString(e));
						}
					}
				},
				{
					name: 'Cancel',
					closeOnClick: true,
					action: () => { }
				}
			]
		});
	};

	return (
		<div class={styles.map}>
			<div class={styles.mapDetails}>
				<div class={styles.mapName}>
					<span innerText={props.map.name} />
				</div>
				<div>
					<button onClick={deleteMap}><BsTrash /></button>
				</div>
			</div>
		</div >
	)
}

export default MapItem;