import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons'
import { useState } from 'preact/hooks'
import { useDashboardContext } from '../../contexts/DashboardContext'
import { DashboardFilters } from './components/DashboardFilters'

type Props = {
	onNewBox: () => void
	onRefresh: () => void
}

export const DashboardHeader = ({ onNewBox, onRefresh }: Props) => {
	const { verticalMode } = useDashboardContext()
	const [filtersShown, setFiltersShown] = useState(false)

	return (
		<div className="dashboard-head">
			{verticalMode && (
				<>
					<button onClick={onNewBox}>
						<PlusIcon />
					</button>
					<button onClick={onRefresh}>
						<RefreshIcon />
					</button>
					<div className="filter-button" onClick={() => setFiltersShown(true)}>
						<FiltersIcon />
					</div>

					{filtersShown && (
						<div className="filters-panel">
							<div className="shadow" />
							<div className="inner">
								<div
									className="filter-close"
									onClick={() => setFiltersShown(false)}
								>
									<CancelIcon />
								</div>

								<DashboardFilters />
							</div>
						</div>
					)}
				</>
			)}
			{!verticalMode && (
				<>
					<button onClick={onNewBox}>Add box</button>
					<div className="spacer" />
					<DashboardFilters />
					<div className="spacer" />
					<button onClick={onRefresh}>
						<RefreshIcon /> Refresh all
					</button>
				</>
			)}
		</div>
	)
}