"use strict";

const React = require("react");

const Layout = require("../layout.jsx");
const DebugView = require("../../components/debug-view.jsx");

module.exports = {
	query: {
		resources: {
			lvm: {
				volumeGroups: {
					name: true,
					totalSpace: true,
					freeSpace: true,
					physicalVolumes: {
						path: true,
						format: true,
						totalSpace: true,
						freeSpace: true,
						isAllocatable: true,
						isUsed: true,
						isDuplicate: true,
					},
					logicalVolumes: {
						name: true,
						path: true,
						size: true,
						status: true,
						type: true,
						healthStatus: true,
						isReadOnly: true,
						creationTime: true
					}
				}
			}
		}
	},
	template: function ({ data }) {
		function SegmentBar({ items }) {
			let columns = items
				.map((item) => `${item.value}fr`)
				.join(" ");

			return (
				<div className="bar" style={{ gridTemplateColumns: columns }}>
					{items.map((item) => {
						return (
							<div key={item.key} className="barSegment" title={item.label}>{item.label}</div>
						);
					})}
				</div>
			);
		}

		return (
			<Layout title="LVM">
				{data.resources.lvm.volumeGroups.map((volumeGroup) => {
					return (<>
						<h2>{volumeGroup.name}</h2>
						<div className="volumeGroup">
							<div className="label">Physical volumes:</div>
							<SegmentBar
								items={volumeGroup.physicalVolumes.map((physicalVolume) => {
									return {
										key: physicalVolume.path,
										value: Math.round(physicalVolume.totalSpace.toMiB().amount),
										label: `${physicalVolume.path} (${physicalVolume.totalSpace.toDisplay(2)})`
									};
								})}
							/>
							<div className="label">Volume group:</div>
							<SegmentBar
								items={[{
									key: volumeGroup.name,
									value: 1,
									label: `${volumeGroup.name} (${volumeGroup.totalSpace.toDisplay(2)})`
								}]}
							/>
							<div className="label">Logical volumes:</div>
							<SegmentBar
								items={volumeGroup.logicalVolumes.map((logicalVolume) => {
									return {
										key: logicalVolume.name,
										value: Math.round(logicalVolume.size.toMiB().amount),
										label: `${logicalVolume.name} (${logicalVolume.size.toDisplay(2)})`
									};
								})}
							/>
						</div>
					</>);
				})}
				<DebugView value={data} />
			</Layout>
		);
	}
};