import { TPosition } from "@svar-ui/lib-dom";
import type { Component } from "svelte";
import type { Snippet } from "svelte";

export interface DropdownOptions {
	inline?: boolean;
	position?: "top" | "right" | "bottom" | "left";
	align?: "start" | "center" | "end";
	autoFit?: boolean;
	css?: string;
	width?: string | "unset" | "auto";
	trackScroll?: boolean;
	virtualized?: boolean;
}

export interface IUser {
	id: string | number;
	name?: string;
	avatar?: string;
	color?: string;
}

export declare const Avatar: Component<{
	value: IUser | IUser[];
	size?: number;
	limit?: number;
	css?: string;
}>;

export declare const TextArea: Component<{
	value?: string;
	id?: string | number;
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	readonly?: boolean;
	css?: string;
	onchange?: (ev: { value: string; input?: boolean }) => void;
}>;

export declare const Button: Component<{
	type?:
		| "primary"
		| "secondary"
		| "danger"
		| "link"
		| "primary block"
		| "secondary block"
		| "danger block"
		| "link block";
	css?: string;
	icon?: string;
	disabled?: boolean;
	title?: string;
	tooltip?: string;
	text?: string;
	children?: () => any;
	onclick?: (ev: MouseEvent) => void;
}>;

export declare const Checkbox: Component<{
	id?: string | number;
	label?: string;
	inputValue?: string | number;
	value?: boolean;
	disabled?: boolean;
	css?: string;
	onchange?: (ev: { value: boolean; inputValue: string | number }) => void;
}>;

export declare const CheckboxGroup: Component<{
	options?: { id: string | number; label: string }[];
	value?: (string | number)[];
	type?: "inline" | "grid";
	css?: string;
	onchange?: (ev: { value: (string | number)[] }) => void;
}>;

export declare const ColorSelect: Component<{
	colors?: string[];
	value?: string;
	id?: string | number;
	clear?: boolean;
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	css?: string;
	dropdown?: DropdownOptions;
	onchange?: (ev: { value: string }) => void;
}>;

export declare const ColorBoard: Component<{
	value?: string;
	button?: boolean;
	css?: string;
	onchange?: (ev: { value: string; input?: boolean }) => void;
}>;

export declare const ColorPicker: Component<{
	value?: string;
	id?: string | number;
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	clear?: boolean;
	css?: string;
	dropdown?: DropdownOptions;
	onchange?: (ev: { value: string }) => void;
}>;

export declare const Combo: Component<{
	value?: string | number;
	id?: string | number;
	options?: { id: string | number; label: string }[];
	textOptions?: { id: string | number; label: string }[];
	textField?: string;
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	clear?: boolean;
	css?: string;
	dropdown?: DropdownOptions & {
		virtualized?: boolean;
	};
	children?: () => any;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const DatePicker: Component<{
	value?: Date;
	id?: string | number;
	disabled?: boolean;
	error?: boolean;
	placeholder?: string;
	format?: string | ((value: Date) => string);
	buttons?: boolean | ("clear" | "today")[];
	css?: string;
	title?: string;
	tooltip?: string;
	editable?: boolean | ((value: string) => Date | null);
	clear?: boolean;
	dropdown?: DropdownOptions;
	onchange?: (ev: { value: Date | null }) => void;
}>;

export declare const DateRangePicker: Component<{
	value?: { start: Date; end?: Date };
	id?: string | number;
	disabled?: boolean;
	error?: boolean;
	placeholder?: string;
	css?: string;
	title?: string;
	tooltip?: string;
	format?: string | ((date: Date) => string);
	months?: 1 | 2;
	buttons?: boolean | ("clear" | "today" | "done")[];
	editable?: boolean | ((value: string) => Date | null);
	clear?: boolean;
	dropdown?: DropdownOptions;
	onchange?: (ev: {
		value: { start: Date; end: Date | null } | null;
	}) => void;
}>;

export declare const Fullscreen: Component<{
	toggleButton?: Snippet<[(ev: MouseEvent) => void, boolean]>;
	children?: () => any;
	hotkey?: string;
}>;

export declare const Icon: Component<{
	css?: string;
	title?: string;
	tooltip?: string;
	children?: () => any;
	onclick?: (ev: MouseEvent) => void;
}>;

export declare const MultiCombo: Component<{
	id?: string | number;
	value?: (string | number)[];
	options?: { id: string | number; label: string }[];
	textOptions?: { id: string | number; label: string }[];
	textField?: string;
	keepText?: boolean;
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	checkboxes?: boolean;
	css?: string;
	dropdown?: DropdownOptions & {
		virtualized?: boolean;
	};
	children?: () => any;
	onchange?: (ev: { value: (string | number)[] }) => void;
}>;

export declare const Popup: Component<{
	left?: number;
	top?: number;
	at?: TPosition;
	parent?: HTMLElement;
	width?: string;
	css?: string;
	trackScroll?: boolean;
	children?: () => any;
	oncancel?: (ev: MouseEvent) => void;
}>;

export declare const Dropdown: Component<
	DropdownOptions & {
		children?: () => any;
		oncancel?: (ev: MouseEvent) => void;
	}
>;

export declare const Pager: Component<{
	total?: number;
	pageSize?: number;
	value?: number;
	css?: string;
	onchange?: (ev: { value: number; from: number; to: number }) => void;
}>;

export declare const RadioButton: Component<{
	id?: string | number;
	label?: string;
	value?: boolean;
	name?: string;
	inputValue?: string | number;
	disabled?: boolean;
	css?: string;
	onchange?: (ev: { value: boolean; inputValue: string | number }) => void;
}>;

export declare const RadioButtonGroup: Component<{
	options?: { id: string | number; label: string }[];
	value?: string | number;
	type?: "inline" | "grid";
	css?: string;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const RichSelect: Component<{
	value?: string | number;
	options?: { id: string | number; label: string }[];
	textOptions?: { id: string | number; label: string }[];
	placeholder?: string;
	disabled?: boolean;
	error?: boolean;
	title?: string;
	tooltip?: string;
	textField?: string;
	clear?: boolean;
	css?: string;
	dropdown?: DropdownOptions & {
		virtualized?: boolean;
	};
	children?: () => any;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const Segmented: Component<{
	options?: {
		id: string | number;
		label: string;
		icon?: string;
		title?: string;
		tooltip?: string;
	}[];
	value?: string | number;
	css?: string;
	children?: () => any;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const Select: Component<{
	value?: string | number;
	options?: { id: string | number; label: string }[];
	placeholder?: string;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	error?: boolean;
	textField?: string;
	clear?: boolean;
	id?: string | number;
	css?: string;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const Slider: Component<{
	id?: string | number;
	label?: string;
	width?: string;
	min?: number;
	max?: number;
	value?: number;
	step?: number;
	title?: string;
	tooltip?: string;
	disabled?: boolean;
	css?: string;
	onchange?: (ev: {
		value: number;
		previous: number;
		input?: boolean;
	}) => void;
}>;

export declare const Switch: Component<{
	id?: string | number;
	value?: boolean;
	disabled?: boolean;
	css?: string;
	onchange?: (ev: { value: boolean }) => void;
}>;

export declare const Tabs: Component<{
	options?: {
		id: string | number;
		label?: string;
		title?: string;
		tooltip?: string;
		icon?: string;
	}[];
	value?: string | number;
	type?: "top" | "bottom";
	css?: string;
	onchange?: (ev: { value: string | number }) => void;
}>;

export declare const Text: Component<{
	value?: string | number;
	id?: string | number;
	readonly?: boolean;
	focus?: boolean;
	select?: boolean;
	type?: "text" | "number" | "password";
	placeholder?: string;
	disabled?: boolean;
	error?: boolean;
	title?: string;
	tooltip?: string;
	css?: string;
	icon?: string;
	clear?: boolean;
	onchange?: (ev: { value: string | number; input?: boolean }) => void;
}>;

export declare const Counter: Component<{
	id?: string | number;
	value?: number;
	step?: number;
	min?: number;
	max?: number;
	error?: boolean;
	disabled?: boolean;
	readonly?: boolean;
	css?: string;
	tooltip?: string;
	onchange?: (ev: { value: number; input?: boolean }) => void;
}>;

export declare const Field: Component<{
	label?: string;
	position?: "left";
	width?: string;
	error?: boolean;
	type?: "checkbox" | "slider" | "switch";
	required?: boolean;
	id?: string | number;
	css?: string;
	children?: () => any;
}>;

export declare const Calendar: Component<{
	value?: Date;
	current?: Date;
	markers?: (date: Date) => string;
	buttons?: boolean | ("clear" | "today")[];
	css?: string;
	onchange?: (ev: { value: Date | null }) => void;
}>;

export declare const Month: Component<{
	value?: { start: Date; end: Date } | Date;
	current?: Date;
	part?: string;
	markers?: (date: Date) => string;
	oncancel?: () => void;
	onchange?: (ev: Date) => void;
}>;

export declare const RangeCalendar: Component<{
	start?: Date;
	end?: Date;
	current?: Date;
	months?: 1 | 2;
	markers?: (date: Date) => string;
	buttons?: boolean | ("clear" | "today" | "done")[];
	css?: string;
	onchange?: (ev: { start: Date | null; end: Date | null }) => void;
}>;

export declare const TimePicker: Component<{
	value?: Date;
	id?: string | number;
	title?: string;
	tooltip?: string;
	css?: string;
	disabled?: boolean;
	error?: boolean;
	format?: string | ((value: Date) => string);
	dropdown?: DropdownOptions;
	onchange?: (ev: { value: Date }) => void;
}>;

export declare const TwoState: Component<{
	value?: boolean;
	type?:
		| "primary"
		| "secondary"
		| "danger"
		| "link"
		| "primary block"
		| "secondary block"
		| "danger block"
		| "link block";
	icon?: string;
	disabled?: boolean;
	iconActive?: string;
	title?: string;
	tooltip?: string;
	css?: string;
	text?: string;
	textActive?: string;
	active?: Snippet<[]>;
	children?: () => any;
	onclick?: (ev: MouseEvent) => void;
	onchange?: (ev: { value: boolean }) => void;
}>;

export declare const Modal: Component<{
	title?: string;
	buttons?: boolean | string[];
	header?: Snippet<[]>;
	footer?: Snippet<[]>;
	css?: string;
	children?: () => any;
	onconfirm?: (ev: { button?: string; event: MouseEvent }) => void;
	oncancel?: (ev: { button?: string; event: MouseEvent }) => void;
}>;

export declare const ModalArea: Component<{
	children?: () => any;
}>;

export declare const SideArea: Component<{
	position?: "right";
	css?: string;
	children?: () => any;
	oncancel?: () => void;
}>;

export declare const Portal: Component<{
	theme?: "willow" | "willow-dark";
	target?: HTMLElement;
	children?: () => any;
}>;

export declare const Material: Component<{
	fonts?: boolean;
	children?: () => any;
}>;

export declare const Willow: Component<{
	fonts?: boolean;
	children?: () => any;
}>;

export declare const WillowDark: Component<{
	fonts?: boolean;
	children?: () => any;
}>;

export declare const Locale: Component<{
	words?: any;
	optional?: boolean;
	children?: () => any;
}>;

export declare const Globals: Component<{
	children?: () => any;
}>;

export declare const SuggestDropdown: Component<
	DropdownOptions & {
		items?: { id: string | number; label: string }[];
		children?: () => any;
		onselect?: (ev: { id: string | number | (string | number)[] }) => void;
		onready?: (ev: {
			navigate?: (dir: number | null, ev?: KeyboardEvent) => void;
			keydown?: (ev: KeyboardEvent, dir: number) => void;
			move?: (ev: KeyboardEvent) => void;
		}) => void;
		multiselect?: boolean;
		checkboxes?: boolean;
		value?: string | number | (string | number)[];
		virtualized?: boolean;
	}
>;

export type { ILocale, Terms, TPosition } from "@svar-ui/lib-dom";

export declare function popupContainer(node: HTMLElement): void;

export type TPositionNoFit = Exclude<
	TPosition,
	"bottom-fit" | "top-fit" | "center-fit"
>;

export type TooltipResolver = (
	element: HTMLElement,
	event: MouseEvent
) => Record<string, any> | string | null;

export declare const Tooltip: Component<{
	at?: TPositionNoFit;
	arrow?: boolean;
	touch?: boolean;
	overflow?: boolean;
	delay?: number;
	content?: Component<Record<string, any>> | null;
	resolver?: TooltipResolver;
	children?: () => any;
	css?: string;
}>;