import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiPower } from 'react-icons/fi';
import { buttonClasses, selectClasses, stackClasses } from 'styles';
import type { WolClient } from 'types';

function WakeOnLan({
	wolClients,
	selectedClient,
	setSelectedClient,
	handleWakeRequest,
}: {
	wolClients: WolClient[];
	selectedClient: WolClient | null;
	setSelectedClient: any;
	handleWakeRequest: () => void;
}) {
	const { isMobile } = useCommonHooks();
	return (
		<Stack
			gap={0}
			pos={'relative'}
			className={stackClasses.menuStack}
			classNames={stackClasses}
			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
		>
			<Menu.Label>Wake on LAN</Menu.Label>
			<Button
				classNames={buttonClasses}
				className={buttonClasses.wakeButton}
				disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
				onClick={() => {
					handleWakeRequest();
				}}
			>
				<FiPower size={32} />
			</Button>
			<Select
				placeholder='Pick a host...'
				defaultValue={wolClients?.[0]?.hostname}
				onChange={(_, option: any) => {
					setSelectedClient({
						hostname: option?.hostname,
						macAddress: option?.macAddress,
					});
				}}
				withCheckIcon={false}
				data={
					wolClients
						?.map((wolClient: WolClient) => {
							return {
								value: wolClient.hostname,
								label: `${wolClient.hostname} (${wolClient.macAddress})`,
								hostname: wolClient.hostname,
								macAddress: wolClient.macAddress,
							};
						})
						.toSorted((a: ComboboxItem, b: ComboboxItem) =>
							a.label.localeCompare(b.label),
						) ?? []
				}
				w='92%'
				classNames={{
					root: selectClasses.menuSelectRoot,
					input: selectClasses.menuSelectInput,
					label: selectClasses.menuSelectLabel,
					options: selectClasses.menuSelectOptions,
					option: selectClasses.menuSelectOption,
				}}
				comboboxProps={{
					withinPortal: false,
					position: 'top',
					width: 'fit-content',
				}}
			/>
		</Stack>
	);
}

export default WakeOnLan;