import { useFetcher } from '@remix-run/react'
import type { PreAuthKey } from '~/types'
import { cn } from '~/utils/cn'

import Dialog from '~/components/Dialog'
import Spinner from '~/components/Spinner'

interface Props {
	authKey: PreAuthKey
}

export default function ExpireKey({ authKey }: Props) {
	const fetcher = useFetcher()

	return (
		<Dialog>
			<Dialog.Button className="my-4">
				Expire Key
			</Dialog.Button>
			<Dialog.Panel>
				{close => (
					<>
						<Dialog.Title>
							Expire auth key?
						</Dialog.Title>
						<fetcher.Form method="DELETE" onSubmit={e => {
							fetcher.submit(e.currentTarget)
							close()
						}}>
							<input type="hidden" name="user" value={authKey.user} />
							<input type="hidden" name="key" value={authKey.key} />
							<Dialog.Text>
								Expiring this authentication key will immediately
								prevent it from being used to authenticate new devices.
								{' '}
								This action cannot be undone.
							</Dialog.Text>
							<div className="mt-6 flex justify-end gap-2 mt-6">
								<Dialog.Action
									variant="cancel"
									onPress={close}
								>
									Cancel
								</Dialog.Action>
								<Dialog.Action
									variant="confirm"
									className={cn(
										'bg-red-500 hover:border-red-700',
										'dark:bg-red-600 dark:hover:border-red-700',
										'pressed:bg-red-600 hover:bg-red-600',
										'text-white dark:text-white',
									)}
									onPress={close}
								>
									{fetcher.state === 'idle'
										? undefined
										: (
											<Spinner className="w-3 h-3" />
											)}
									Expire
								</Dialog.Action>
							</div>
						</fetcher.Form>
					</>
				)}
			</Dialog.Panel>
		</Dialog>
	)
}