"use strict";

const React = require("react");
const classnames = require("classnames");
const syncpipe = require("syncpipe");
const splitFilterN = require("split-filter-n");
const gql = require("../../../packages/graphql-interface/tag");
const { B } = require("../../../packages/unit-bytes-iec");

const Layout = require("../layout");

// FIXME: For disk image feeds (eg. third-party image providers), have the admin specify a prefix which gets colon-prefixed to every named image in that feed (so that images may be auto-updated)

module.exports = {
	query: gql`
		query {
			images {
				installationMedia {
					id
					name
					filesize
					description
					thumbnail
					originalSource # URL/path
					storagePath
				}
			}
		}
	`,
	template: function StorageDeviceList({data}) {
		return (
			<Layout title="Installation Media">
				<table className="installationMedia">
					<tr>
						<th></th>
						<th>Name</th>
						<th>Description</th>
						<th>Size</th>
						<th>Actions</th>
					</tr>
					{data.images.installationMedia.map((image) => {
						return (
							<tr>
								<td>
									{(image.thumbnail != null)
										? <img
											src={`/static/thumbnails/media/${image.thumbnail}`}
											alt={`${image.name} Logo`}
										/>
										: null
									}
								</td>
								<td>{image.name}</td>
								<td>
									{image.description}

									<dl>
										<dt>Source</dt>
										<dd>{image.originalSource}</dd>

										<dt>Stored at</dt>
										<dd>{image.storagePath}</dd>
									</dl>
								</td>
							</tr>
						);
					})} 
				</table>
			</Layout>
		);
	}
};