import React from "react";
import { createComponent } from "@lit/react";
import { MdIconButton as MdIconButtonWebComponent } from "@material/web/iconbutton/icon-button";
import { MdFilledIconButton as MdFilledIconButtonWebComponent } from "@material/web/iconbutton/filled-icon-button";
import { MdOutlinedIconButton as MdOutlinedIconButtonWebComponent } from "@material/web/iconbutton/outlined-icon-button";
import { MdFilledTonalIconButton as MdFilledTonalIconButtonWebComponent } from "@material/web/iconbutton/filled-tonal-icon-button";

const MdIconButton = createComponent({
	react: React,
	tagName: 'md-icon-button',
	elementClass: MdIconButtonWebComponent,
	events: {
		onChange: 'change',
		onInput: 'input',
		onClick: 'click',
	},
});

const MdFilledIconButton = createComponent({
	react: React,
	tagName: 'md-filled-icon-button',
	elementClass: MdFilledIconButtonWebComponent,
	events: {
		onChange: 'change',
		onInput: 'input',
		onClick: 'click',
	},
});

const MdOutlinedIconButton = createComponent({
	react: React,
	tagName: 'md-outlined-icon-button',
	elementClass: MdOutlinedIconButtonWebComponent,
	events: {
		onChange: 'change',
		onInput: 'input',
		onClick: 'click',
	},
});

const MdFilledTonalIconButton = createComponent({
	react: React,
	tagName: 'md-filled-tonal-icon-button',
	elementClass: MdFilledTonalIconButtonWebComponent,
	events: {
		onChange: 'change',
		onInput: 'input',
		onClick: 'click',
	},
});

type IconButtonProps = {
	variant?: 'filled' | 'outlined' | 'filled-tonal' | 'standard';
	disabled?: boolean;
	flipIconInRtl?: boolean;
	href?: string;
	target?: '_blank' | '_self' | '_parent' | '_top';
	ariaLabelSelected?: string;
	toggle?: boolean;
	selected?: boolean;
	type?: 'button' | 'submit' | 'reset';
	value?: string;
	name?: string;
	form?: HTMLFormElement;
	labels?: NodeListOf<HTMLLabelElement>;
	children: React.ReactNode;
	style?: React.CSSProperties;
	className?: string;
	id?: string;
	onChange?: (event: Event) => void;
	onInput?: (event: Event) => void;
	onClick?: (event: Event) => void;
};

export const IconButton = (props: IconButtonProps) => {
	const variant = props.variant || 'standard';
	switch (variant) {
		case 'filled':
			return <MdFilledIconButton {...props} />;
		case 'outlined':
			return <MdOutlinedIconButton {...props} />;
		case 'filled-tonal':
			return <MdFilledTonalIconButton {...props} />;
		default:
			return <MdIconButton {...props} />;
	}
};