import React, {useState} from "react";
import {createSmartable} from "../src/Smartable/Smartable";
import {createColumn, createColumns} from "../src/Smartable/Column";
import {StringFilter} from "../src/Smartable/Filters/StringFilter";
import { Cell } from "../src/Smartable/Cell";


// Create main table.
const Smartable = createSmartable({
	columns: createColumns(
		createColumn("name", {
			title: "Name",
			filter: StringFilter,
		}),
		createColumn("actions", {
			title: "Actions",
		}),
	),
});

export function RemoveDemoTable()
{
	const [rows, setRows] = useState<string[]>([
		"Formica rufa",
		"Lasius niger",
		"Camponotus pennsylvanicus",
		"Solenopsis invicta",
		"Atta cephalotes",
		"Pogonomyrmex barbatus",
		"Myrmica rubra",
		"Dorymyrmex insanus",
		"Pheidole megacephala",
		"Crematogaster scutellaris",
		"Tetramorium caespitum",
		"Tapinoma sessile",
		"Linepithema humile",
		"Monomorium pharaonis",
		"Odontomachus bauri",
		"Paraponera clavata",
		"Oecophylla smaragdina",
		"Pseudomyrmex gracilis",
		"Eciton burchellii",
		"Anoplolepis gracilipes",
		"Acromyrmex octospinosus",
		"Acanthomyops claviger",
		"Dorylus nigricans",
		"Neivamyrmex nigrescens",
		"Hypoponera punctatissima",
		"Solenopsis geminata",
		"Camponotus chromaiodes",
		"Brachymyrmex depilis",
		"Ectatomma ruidum",
		"Proceratium silaceum",
		"Cephalotes atratus",
		"Neoponera villosa",
		"Dinoponera gigantea",
		"Prenolepis imparis",
		"Lasius flavus",
		"Formica fusca",
		"Myrmecia gulosa",
		"Solenopsis molesta",
		"Camponotus herculeanus",
		"Cataulacus granulatus",
		"Daceton armigerum",
		"Polyrhachis dives",
		"Pheidole dentata",
		"Tetramorium immigrans",
		"Messor barbarus",
		"Cardiocondyla obscurior",
		"Nylanderia flavipes",
		"Forelius pruinosus",
		"Amblyopone pallipes",
	]);

	return (
		<Smartable.Table data={rows.map((row, rowIndex) => ({
			cells: {
				name: {
					data: row,
				},
				actions: {
					data: null,
					element: (
						<Cell>
							<button className={"remove"}
							        onClick={() => setRows(rows.toSpliced(rowIndex, 1))}>
								Remove
							</button>
						</Cell>
					)
				},
			},
		}))} />
	);
}
