import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
import { JSX } from 'preact'

import { Budget, currency, percentage } from '../models.ts'

interface IconButtonProps {
	active?: boolean
	text?: string
	icon?: JSX.Element
}
function IconButton(
	{ icon, children, active, ...props }:
		& IconButtonProps
		& JSX.HTMLAttributes<HTMLButtonElement>,
) {
	return (
		<button
			class={'p-2 sm:px-4 flex flex-col sm:flex-row flex-1 sm:flex-none bg-mantle justify-center items-center sm:justify-start text-center sm:text-left rounded' +
				(active ? ' text-primary' : '')}
			{...props}
		>
			<div class='sm:mr-2'>{icon}</div>
			<div class=''>{children}</div>
		</button>
	)
}

function BudgetCard(
	{ budget, ...props }:
		& { budget: Budget }
		& JSX.HTMLAttributes<HTMLDivElement>,
) {
	return (
		<div
			class='bg-surface0 rounded shadow hover:bg-surface1 transition-colors flex justify-between'
			{...props}
		>
			<div class='p-2'>
				{budget.name}: {currency(budget.spent)} / {currency(budget.target)}{' '}
				({percentage(budget.spent / budget.target)})
			</div>
			<button class='text-surface1 cursor-grab p-2'>
				<svg
					xmlns='http://www.w3.org/2000/svg'
					fill='none'
					viewBox='0 0 24 24'
					strokeWidth={1.5}
					stroke='currentColor'
					className='size-6'
				>
					<path
						strokeLinecap='round'
						strokeLinejoin='round'
						d='M3.75 9h16.5m-16.5 6.75h16.5'
					/>
				</svg>
			</button>
		</div>
	)
}

export default function Dashboard() {
	const activeNavItemIndex = useSignal(0)
	const budgets: Budget[] = [
		{
			name: 'Groceries',
			target: 1000,
			spent: 367.97,
		},
		{
			name: 'Fast Food',
			target: 300,
			spent: 420.69,
		},
		{
			name: 'Insurance',
			target: 220.44,
			spent: 0,
		},
		{
			name: 'Mortgage',
			target: 1310.47,
			spent: 1310.47,
		},
	]
	const navItems = [
		{
			text: 'Some Text',
			icon: (
				<svg
					xmlns='http://www.w3.org/2000/svg'
					fill='none'
					viewBox='0 0 24 24'
					strokeWidth={1.5}
					stroke='currentColor'
					className='size-6'
				>
					<path
						strokeLinecap='round'
						strokeLinejoin='round'
						d='M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5'
					/>
				</svg>
			),
		},
		{
			text: 'Some Text',
			icon: (
				<svg
					xmlns='http://www.w3.org/2000/svg'
					fill='none'
					viewBox='0 0 24 24'
					strokeWidth={1.5}
					stroke='currentColor'
					className='size-6'
				>
					<path
						strokeLinecap='round'
						strokeLinejoin='round'
						d='m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z'
					/>
				</svg>
			),
		},
		{
			text: 'Some Text',
			icon: (
				<svg
					xmlns='http://www.w3.org/2000/svg'
					fill='none'
					viewBox='0 0 24 24'
					strokeWidth={1.5}
					stroke='currentColor'
					className='size-6'
				>
					<path
						strokeLinecap='round'
						strokeLinejoin='round'
						d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'
					/>
				</svg>
			),
		},
	]

	return (
		<div class='grid grid-rows-[1fr_auto] sm:grid-cols-2 sm:grid-rows-1 sm:grid-cols-[1fr_auto] h-[100vh]'>
			<main class='p-2 sm:pr-0 flex flex-col gap-2'>
				{budgets.map((budget, _i) => <BudgetCard budget={budget} />)}
			</main>

			<nav class='w-full flex flex-1 sm:flex-col sm:bg-bg gap-2 p-2'>
				{navItems.map(({ text, ...props }, i) => (
					<IconButton
						{...props}
						active={i == activeNavItemIndex.value}
						onClick={(ev) => {
							console.log({ ev, i })
							activeNavItemIndex.value = i
						}}
					>
						{text}
					</IconButton>
				))}
			</nav>
		</div>
	)
}