"use strict";

const React = require("react");
const classnames = require("classnames");
const gql = require("../../../packages/graphql-interface/tag");

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

function Indented({ depth, children }) {
	return (
		<div style={{ paddingLeft: depth * 10 }}>
			{children}
		</div>
	);
}

function MountEntry({ mount }) {
	return <div className="mountpoint">{mount.mountpoint}</div>;
}

function PartitionEntry({partition, isLast}) {
	function PartitionIndent({ children }) {
		return (
			<Indented depth={partition._treecutterDepth}>
				{children}
			</Indented>
		);
	}

	return (
		<tr className={classnames("partition", {last: isLast})}>
			<td>
				<PartitionIndent>
					{partition.name}
				</PartitionIndent>
			</td>
			<td>
				<PartitionIndent>
					{partition.size.toString()}
				</PartitionIndent>
			</td>
			<td colSpan={5}>
				<PartitionIndent>
					{(partition.mounts.length > 0)
						? partition.mounts.map((mount) => <MountEntry mount={mount} />)
						: <span className="notMounted">(not mounted)</span>
					}
				</PartitionIndent>
			</td>
		</tr>
	);
}

function DriveEntry({drive}) {
	let hasPartitions = (drive.partitions.length > 0);

	return (<>
		<tr className={classnames({hasPartitions})}>
			<td className={classnames("smart", drive.smartHealth)} rowSpan={1 + drive.partitions.length} />
			<td>{drive.path}</td>
			<td>{drive.size.toDisplay(2).toString()}</td>
			<td>
				{(drive.rpm != null)
					? `${drive.rpm} RPM`
					: null
				}
			</td>
			<td>{drive.serialNumber}</td>
			<td>{drive.model}</td>
			<td>{drive.modelFamily}</td>
			<td>{drive.firmwareVersion}</td>
		</tr>
		{drive.partitions.map((partition, i) => {
			let isLast = (i === drive.partitions.length - 1);

			return <PartitionEntry partition={partition} isLast={isLast} />;
		})}
	</>);
}

module.exports = {
	query: gql`
		query {
			hardware {
				drives {
					path
					smartHealth
					size
					rpm
					serialNumber
					model
					modelFamily
					firmwareVersion

					blockDevice {
						name
					}

					partitions: allBlockDevices {
						_treecutterDepth
						_treecutterSequenceNumber

						name
						size

						mounts {
							mountpoint
						}
					}
				}
			}
		}
	`,
	template: function StorageDeviceList({data}) {
		return (
			<Layout title="Storage Devices">
				<table className="drives">
					<tr>
						<th>SMART</th>
						<th>Device</th>
						<th>Total size</th>
						<th>RPM</th>
						<th>Serial number</th>
						<th>Model</th>
						<th>Family</th>
						<th>Firmware version</th>
					</tr>
					{data.hardware.drives.map((drive) => <DriveEntry drive={drive} />)}
				</table>
			</Layout>
		);
	}
};