import * as React from 'react';
import { useState } from "react";

import DataTableWithKUpload, { DataTableColumn, WithId } from "./DataTableWithKUpload";

type File = WithId;

const files: File[] = [
{
	id: 0,
	fileName: "test1.pptx",
	fileSize: "2010216",
	fileFullPath: "/testfile/4850a60325d2491d80d0b2b3dba58976.pptx",
	fileCustomValue: "0",
	fileStatus: "Done"
},
{
	id: 1,
	fileName: "test2.xlsx",
	fileSize: "5963755",
	fileFullPath: "/testfile/ab16e03f0fd944d088ccc4492175e77f.xlsx",
	fileCustomValue: "1",
	fileStatus: "Done"
}
];

function App() {
    const [data, setData] = useState(files);

	const columns: DataTableColumn<File>[] = [
		{
			name: "File Name",
			selector: (m: File) => m.fileName,
			editKey: "fileName"
		},
		{
			name: "File Size",
			selector: (m: File) => m.fileSize,
			editKey: "fileSize"
		},
		{
			name: "File FullPath",
			selector: (m: File) => m.fileFullPath,
			editKey: "fileFullPath"
		},
		{
			name: "File CustomValue",
			selector: (m: File) => m.fileCustomValue,
			editKey: "fileCustomValue"
		},
		{
			name: "File Status",
			selector: (m: File) => m.fileStatus,
			editKey: "fileStatus"
		}
	];

	return (
		<div>
			<section>

				<div className="paper flex-grow-1">
					<DataTableWithKUpload
						title="File list"
						columns={columns}
						data={data}

						update={setData}
					/>
				</div>

			</section>
			<footer>{`Running React v${ React.version }`}</footer>
		</div>
	);
}

export default App;