/* eslint-disable ts/no-use-before-define */
/* eslint-disable no-alert */
/* eslint-disable no-console -- this file is the dropdown/component sandbox; log statements demonstrate event flow */
import type { BreadcrumbItem } from '../app/breadcrumb';

import type { AppMenuItem } from '../app/menu';

import type { CardHeaderDropdownArgs } from '../card/card-header-with-options';
import type { DropdownListOption } from '../dropdown';
import type { ImageDropdownDataItem } from '../dropdown/image-dropdown';
import type { SmartDropdownCategoryItem, SmartDropdownSearchResultItem } from '../dropdown/smart-dropdown';
import type { TimegridCalendarAddClickedArgs, TimegridCalendarEvent } from '../fullcalendar/timegrid-calendar';
import { Prop, toNative } from 'vue-facing-decorator';
import { globalState } from '../../app/global-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { PowerduckViewModelBase } from '../../common/base-component';
import Accordion from '../accordion/accordion';
import { AccordionPage } from '../accordion/accordion-page';
import BootstrapToggle, { BootstrapToggleSize } from '../bootstrap-toggle';
import Button from '../button/button';
import { ButtonLayout, ButtonSize } from '../button/button-layout';
import TextButton from '../button/text-button';
import Card from '../card/card';
import CardBody from '../card/card-body';
import CardHeader from '../card/card-header';
import CardHeaderWithOptions from '../card/card-header-with-options';
import DataTableStatic from '../datatable/datatable-static';
import DropdownList, { MultiselectMode } from '../dropdown';
import DropdownButton from '../dropdown-button/dropdown-button';
import DropdownButtonItem from '../dropdown-button/dropdown-button-item';
import DropdownButtonSeparator from '../dropdown-button/dropdown-button-separator';
import CountryDropdown from '../dropdown/country-dropdown';
import ImageDropdown from '../dropdown/image-dropdown';
import SmartDropdown from '../dropdown/smart-dropdown';
import Fieldset from '../form/fieldset';
import FlexContainer from '../form/flex-container';
import FooterButtons from '../form/footer-buttons';
import FlexFormItem from '../form/form-item-flex';
import Separator from '../form/separator';
import ValidationResultDisplayer from '../form/validation-result-displayer';
import FullCalendarDraggableEvent from '../fullcalendar/fullcalendar-draggable-event';
import HtmlLiteral from '../html-literal/html-literal';
import UploadImageAndCropButton from '../image-crop/upload-and-crop';
import CheckBox from '../input/checkbox';
import ColorPicker from '../input/color-picker';
import DaterangePicker from '../input/daterange-picker';
import DatetimePicker from '../input/datetime-picker';
import NumericInput, { NumericInputMode } from '../input/numeric-input';
import TextBox from '../input/textbox';
import WysiwygEditor from '../input/wysiwig';
import ModalSection from '../modal-wrap/modal-section';
import ModalSectionWrapper from '../modal-wrap/modal-section-wrapper';
import Modal, { ModalSize } from '../modal/modal';
import ModalBody from '../modal/modal-body';
import ModalFooter from '../modal/modal-footer';

interface TagItem {
	id: string;
	text: string;
}

@Component
class TestAllComponentsPageComponent extends PowerduckViewModelBase {
	name: string = null; // Needs to have =null suffixed so that TS compiler takes it into account
	boolValue: boolean = null;
	selectedOptions: any = null;
	timeViewType: string = 'resourceTimeline';
	timeEvents: TimegridCalendarEvent[] = [];
	blockModal: boolean = false;
	color: string = '#FF00FF';
	numberVal: number = 1;
	tags: TagItem[] = [];
	selectedTagIds: string[] = [];
	count: number = 0;
	selectedImageDropdownItems: ImageDropdownDataItem[] = null;
	date: Temporal.PlainDateTime = Temporal.PlainDateTime.from('2026-04-04');
	dateRange: any = null;
	selectedCountry: string = 'SVK';
	selectedCountries: string[] = ['SVK', 'CZE'];

	protected get breadcrumbItems(): BreadcrumbItem[] {
		return [
			{
				text: 'Home',
				url: '/',
				icon: 'icon-direction',
			},
			{
				text: 'Hello world',
				url: null,
			},
		];
	}

	protected get menuItems(): AppMenuItem[] {
		return [];
	}

	mounted() {
		globalState._helloInstance = this;
	}

	getLineChartHeaderOptions(): CardHeaderDropdownArgs[] {
		const retVal: CardHeaderDropdownArgs[] = [];

		retVal.push({
			text: 'Jedna moznosti',
			icon: 'fas fa-download',
			clicked: () => alert('jedna'),
		});

		retVal.push({
			text: 'Dva moznostka',
			icon: 'fas fa-sync-alt',
			clicked: () => alert('dva'),
		});

		return retVal;
	}

	getDummyDropdownOptions(): DropdownListOption[] {
		return [
			{ id: '1', someSpecific: true, text: 'Moznost 1' } as any,
			{ id: '2', text: 'Moznost 2' },
		];
	}

	addTimeEvent(e: TimegridCalendarAddClickedArgs) {
		const startTime = e.defaultDate;
		const endTime = startTime.add({ hours: 1 });

		this.timeEvents.push({
			id: `idd${Math.random() * (999999999 - 1)}${1}`,
			dataRow: { jedna: 'sdfsd', druha: 'sdfsdfsd' },
			resourceId: e.resource != null ? e.resource.id : prompt('Room a or b?', 'a'),
			title: `Event cislo ${this.timeEvents.length}${1}`,
			start: startTime,
			end: endTime,
		});
	}

	getImageDropdownSource(): ImageDropdownDataItem[] {
		return [
			{ id: 1, text: 'Kazuyoshi Funaki', subtitle: 'Nagano 98', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/6/69/Kazuyoshi_Funaki_%28JAP%29_2014.jpg' },
			{ id: 2, text: 'Masahiko Harada', subtitle: 'Nagano 98', imageUrl: 'https://img.olympics.com/images/image/private/t_1-1_300/f_auto/primary/kvwgfkitbetfq96l0jcd' },
		];
	}

	getTagDropdown(): typeof DropdownList.prototype {
		return this.$refs.tagsDropdown as typeof DropdownList.prototype;
	}

	fireChangedEvent(e: string[]) {
		this.$nextTick(() => {
			this.getTagDropdown().close();
			this.$nextTick(() => {
				this.selectedTagIds = e;
			});
		});
	}

	// 1. Static Categories
	categories: SmartDropdownCategoryItem[] = [
		{ id: 101, text: 'Skipass' },
		{ id: 102, text: 'Výlet lanovkou' },
		{ id: 103, text: 'Aquapass' },
		{ id: 104, text: 'Ubytovanie' },
		{ id: 105, text: 'Parkovanie' },
		{ id: 106, text: 'Eventy' },
		{ id: 107, text: 'Zazitky' },
		{ id: 108, text: 'Ine srandy' },
		{ id: 109, text: 'Vouchery' },
		{ id: 110, text: 'Pokemony' },
		{ id: 111, text: 'Kino' },
		{ id: 112, text: 'Restauracie' },
		{ id: 113, text: 'Este insie srandy' },
		{ id: 114, text: 'Sranda banda' },
	];

	// 2. Selected State
	selectedItems: (SmartDropdownCategoryItem | SmartDropdownSearchResultItem)[] = [];

	// 3. Search Data Logic (Simulated Backend)
	async fetchSmartDropdownSearchData(query: string): Promise<SmartDropdownSearchResultItem[]> {
		console.log('Fetching for:', query);

		// Simulate network delay
		await new Promise(resolve => setTimeout(resolve, 500)); // 500ms delay

		const mockDb: SmartDropdownSearchResultItem[] = [
			{ id: 1, text: 'Hotel Grand Jasná', subtitle: 'Ubytovanie • Jasná', imageUrl: 'https://picsum.photos/200' },
			{ id: 2, text: 'Celosezónny Skipass', subtitle: 'Produkt • Nízke Tatry', imageUrl: 'https://picsum.photos/200' },
			{ id: 3, text: 'Hotel Rotunda', subtitle: 'Ubytovanie • Chopok', imageUrl: 'https://picsum.photos/200' },
			{ id: 4, text: 'Fresh Track', subtitle: 'Zážitok • Lomnica' },
			{ id: 5, text: 'Wellness Hotel', subtitle: 'Ubytovanie • Bešeňová' },
		];

		return mockDb.filter(item =>
			item.text.toLowerCase().includes(query.toLowerCase()));
	}

	// 4. Handle Change
	onSmartDropdownSelectionChange(newSelection: any[]) {
		console.log('Selection updated:', newSelection);
		this.selectedItems = newSelection;
	}

	// 2. Custom Sections (History & Inspiration)
	get customSections() {
		return [
			{
				id: 'history',
				title: 'Nedávne vyhľadávania',
				items: [
					{ id: 'h1', text: 'Jasná', type: 'history' },
					{ id: 'h2', text: 'Vysoké Tatry', type: 'history' },
				],
			},
			{
				id: 'inspiration',
				title: 'Váhate, kam cestovať najbližšie?',
				items: [
					{ id: 'insp1', text: 'Zadajte Kamkoľvek', type: 'special', icon: 'pin' },
					{ id: 'insp2', text: 'V mojej lokalite', type: 'special', icon: 'target' },
				],
			},
		];
	}

	// 4. Custom Handler for History Delete
	removeSmartDropdownHistory(e: Event, id: string | number) {
		e.stopPropagation();
		console.log('Removing history', id);
		// logic to remove from customSections...
	}

	render(h) {
		return (
			<div>
				<p>Hello world from the boilerplate</p>
				<p>{`Your name is: ${this.name?.length > 0 ? this.name : 'Not specified'}`}</p>

				<TextBox
					label="Your name"
					value={this.name}
					showClearValueButton={true}
					changed={(e) => {
						this.name = e;
					}}
					subtitle="Some additional info about the field"
				/>
				<TextBox
					label="Your name append"
					value={this.name}
					showClearValueButton={true}
					changed={(e) => {
						this.name = e;
					}}
					appendIcon="fas fa-user"
				/>
				<TextBox
					label="Your name prepend"
					value={this.name}
					showClearValueButton={true}
					changed={(e) => {
						this.name = e;
					}}
					prependIcon="fas fa-user"
				/>
				<TextBox
					label="With error"
					value={null}
					changed={(_e) => { }}
					validationState={{
						errorMessage: 'Unable to proceed, error...',
						mandatory: true,
						valid: false,
						validationDeclaration: null,
					}}
				/>
				<CheckBox
					label="Do you agree?"
					checkboxLabelHtml="Additional checkbox label"
					value={this.boolValue}
					changed={(e) => {
						this.boolValue = e;
					}}
				/>
				<ColorPicker
					label="Pick a color"
					value={this.color}
					changed={(e) => {
						this.color = e;
					}}
				/>
				<DaterangePicker
					label="Range picker"
					autoClose={true}
					value={this.dateRange}
					changed={(e) => {
						this.dateRange = e;
					}}
				/>
				<DatetimePicker
					label="Pick a date"
					value={this.date}
					showTime={true}
					changed={(e) => {
						this.date = e;
					}}
				/>
				<NumericInput
					label="Spinner number input"
					value={this.numberVal}
					changed={(e) => {
						this.numberVal = e;
					}}
				/>
				<NumericInput
					label="Native number input"
					mode={NumericInputMode.Clasic}
					value={this.numberVal}
					changed={(e) => {
						this.numberVal = e;
					}}
				/>
				<WysiwygEditor label="WYSIWIG" value={null} changed={(_e) => { }} />
				{/* <Tabs>
                    <TabPage icon={"icon icon-user"} navCaption={"User"}>
                        Tu je tab usera
                    </TabPage>
                    <TabPage icon={"icon icon-settings"} navCaption={"Settings"}>
                        Tu je tab settings
                    </TabPage>
                </Tabs>
                <Tabs renderMode={TabsRenderMode.Normal}>
                    <TabPage icon={"icon icon-user"} navCaption={"User"}>
                        Tu je tab usera
                    </TabPage>
                    <TabPage icon={"icon icon-settings"} navCaption={"Settings"}>
                        Tu je tab settings
                    </TabPage>
                </Tabs> */}
				<br />
				<br />
				{/* <Tabs renderMode={TabsRenderMode.SidePillsExtended}>
                    <TabPage icon={"icon icon-user"} navCaption={"User"}>
                        Tu je tab usera
                    </TabPage>
                    <TabPage icon={"icon icon-settings"} navCaption={"Settings"}>
                        Tu je tab settings
                    </TabPage>
                </Tabs> */}
				<br />
				<br />
				<BootstrapToggle
					label="Toggle"
					value={this.boolValue}
					changed={(e) => {
						this.boolValue = e;
					}}
				/>

				<BootstrapToggle
					label="Toggle"
					value={this.boolValue}
					size={BootstrapToggleSize.Small}
					changed={(e) => {
						this.boolValue = e;
					}}
				/>
				<Button
					text="Click me"
					layout={ButtonLayout.Primary}
					disabled={true}
					icon="icon icon-people"
					iconButton={false}
					round={true}
					size={ButtonSize.Regular}
					tooltip="Sample tooltip"
					clicked={(_e) => {
						alert('you clicked me');
					}}
				/>
				<Button
					text="Show sample modal"
					layout={ButtonLayout.Secondary}
					clicked={(_e) => {
						this.blockModal = true;
						(this.$refs.sampleModal as typeof Modal.prototype).show();
						setTimeout(() => {
							this.blockModal = false;
						}, 3000);
					}}
				/>

				<Button
					text="Show sectionaed"
					layout={ButtonLayout.Secondary}
					clicked={(_e) => {
						this.blockModal = true;
						(this.$refs.sampleSectionedModal as typeof Modal.prototype).show();
						setTimeout(() => {
							this.blockModal = false;
						}, 3000);
					}}
				/>
				<Modal size={ModalSize.Large} ref="sampleSectionedModal" title="Sample modal" blocked={this.blockModal}>
					<ModalBody>
						<ModalSectionWrapper ref="modalSectionWrapper">
							<ModalSection icon="icon icon-settings" navCaption="Settings1">
								<p>Some modal content1</p>
							</ModalSection>
							{this.boolValue == true
							&& (
								<ModalSection icon="icon icon-settings" navCaption="Settings2">
									<p>Some modal content2</p>
								</ModalSection>
							)}

							<ModalSection icon="icon icon-settings" navCaption="Settings4">
								<p>Some modal content4444</p>
							</ModalSection>

							<ModalSection icon="icon icon-settings" navCaption="Settings9">
								<p>Some modal content9999</p>
							</ModalSection>

							<Button layout={ButtonLayout.Primary} text="OK" clicked={() => { }} />
						</ModalSectionWrapper>
					</ModalBody>
				</Modal>

				<TextButton
					text="Click me for some news"
					icon="icon icon-people"
					clicked={(_e) => {
						alert('you clicked me?');
					}}
				/>
				<Card>
					<CardHeader title="Vacsia titulka" />
					<CardBody>jeden, dva</CardBody>
				</Card>
				<Card>
					<CardHeader smallTitle="Graf vstupov" />
					<CardBody>jeden, dva</CardBody>
				</Card>
				<br />
				<br />
				<Card renderMode="inlined">
					<CardHeader title="Inlajnova karta" />
					<CardBody>jeden, dva</CardBody>
				</Card>
				<br />
				<br />
				<Card>
					<CardHeaderWithOptions smallTitle="Graf vstupov" dropdownOptions={this.getLineChartHeaderOptions()} />
					<CardBody>jeden, dva</CardBody>
				</Card>
				<DataTableStatic
					id="tblTest"
					topVisible={true}
					columns={[
						{ id: 'One', caption: 'One' },
						{ id: 'Two', caption: 'Two' },
						{ id: 'Three', caption: 'Three' },
					]}
					rows={[
						{ One: 'Row-1-1', Two: 'Row-2-1', Three: 'Row-3-1' },
						{ One: 'Row-1-2', Two: 'Row-2-2', Three: 'Row-3-2' },
						{ One: 'Row-1-3', Two: 'Row-2-3', Three: 'Row-3-3' },
					]}
				/>
				<DropdownList
					options={this.getDummyDropdownOptions()}
					selected={this.getDummyDropdownOptions().filter(p => p.id == this.selectedOptions)[0]}
					label="TODO: Upravit sablonou Vyber z dropdownu"
					changed={(v) => {
						this.selectedOptions = v.id;
					}}
				/>
				<DropdownList
					options={this.getDummyDropdownOptions()}
					selected={this.getDummyDropdownOptions().filter(p => p.id == this.selectedOptions)[0]}
					label="Custom override"
					multiselect={true}
					multiselectMode={MultiselectMode.Checkboxes}
					customRenderOption={(
						h,
						item,
						_originator,
					) => <CustomDropdownItem text={item.text} />}
					customRenderSelectionResult={(
						h,
						item,
						_originator,
					) => <CustomDropdownItem text={item.text} />}
					changed={(v) => {
						this.selectedOptions = v.id;
					}}
				/>

				<CountryDropdown
					label="Country (single, with flag)"
					value={this.selectedCountry}
					changed={(e) => {
						this.selectedCountry = e as string;
					}}
				/>
				<p>{`Selected country: ${this.selectedCountry ?? 'none'}`}</p>

				<CountryDropdown
					label="Country (multi-select with countriesAtStart)"
					multiselect={true}
					countriesAtStart={['SVK', 'CZE', 'USA', 'DEU']}
					value={this.selectedCountries}
					changed={(e) => {
						this.selectedCountries = (e as string[]) ?? [];
					}}
				/>
				<p>{`Selected countries: ${(this.selectedCountries ?? []).join(', ') || 'none'}`}</p>

				<ImageDropdown
					options={this.getImageDropdownSource()}
					buttons={[
						{
							iconCss: 'icon icon-pencil',
							clicked: (_e) => {
								console.log('it was clicked');
							},
						},
					]}
					label="Osoby"
					selected={this.selectedImageDropdownItems}
					tagsAdded={(e) => {
						console.log(JSON.stringify(e));
					}}
					changed={(e) => { this.selectedImageDropdownItems = e; }}
				/>

				<DropdownList
					ref="tagsDropdown"
					closeOnSelect={true}
					blocked={false}
					options={this.tags}
					displayMember={item => item.text}
					valueMember={item => item.text}
					multiselect={true}
					label=""
					tags={true}
					tagsShouldPrependContent={true}
					tagsAdded={(e) => {
						e.closeSelection = true;

						const newItem: TagItem = {
							id: e.tagArr[0],
							text: e.tagArr[0],
						};

						const selectedClone = [...this.selectedTagIds];
						selectedClone.push(newItem.id);

						this.tags.push(newItem);
						this.fireChangedEvent(selectedClone);
					}}
					selected={this.tags.filter(p => (this.selectedTagIds || []).includes(p.id))}
					changed={(e) => {
						this.fireChangedEvent((e || []).map(p => p.id));
					}}
				/>

				<SmartDropdown
					label="Mudry dropdown"
					wrap={false}
					categories={this.categories}
					searchData={this.fetchSmartDropdownSearchData}
					customSections={this.customSections}
					value={this.selectedItems}
					buttonLayout="inline"
					selectionDisplay="chips"

					searchMode="input"
					changed={this.onSmartDropdownSelectionChange} // Or use @selectionChanged in template
					multiselect={true} // Toggle to false for single select
					placeholder="Hľadajte hotel, službu..."
					// customSectionRender={(item, selected) => {
					// 	// Example: History Item
					// 	if (item.type === 'history') {
					// 		return (
					// 			<div style="display:flex; justify-content:space-between; padding: 8px 16px;">
					// 				<span>
					// 					↻
					// 					<b>{item.text}</b>
					// 				</span>
					// 				<span onClick={e => this.removeHistory(e, item.id)}>x</span>
					// 			</div>
					// 		);
					// 	}

					// 	// Example: Default Checkbox style via simple HTML
					// 	return (
					// 		<div style="display:flex; align-items:center; padding: 8px 16px;">
					// 			<div class={`checkbox-visual ${selected ? 'checked' : ''}`} style="margin-right:10px; width:16px; height:16px; border:1px solid #ccc;"></div>
					// 			{item.text}
					// 		</div>
					// 	);
					// }}
					customTriggerScope="mobile"
					customTriggerRender={() => (
						<div style="display:flex; flex-direction:column; width:100%; gap:8px;">
							{/* Mimicking the stacked mobile inputs */}
							<div style="border:1px solid #eee; padding:8px; border-radius:8px; display:flex; justify-content:space-between;">
								<span style="color:#999; font-size:12px">Kam</span>
								<strong>Jasná</strong>
							</div>
							<div style="border:1px solid #eee; padding:8px; border-radius:8px; display:flex; justify-content:space-between;">
								<span style="color:#999; font-size:12px">Čo hľadáte</span>
								<strong>Skipass</strong>
							</div>
						</div>
					)}
				/>

				<DropdownButton layout={ButtonLayout.Default} size={ButtonSize.Regular} text="Akcie">
					<DropdownButtonItem icon="icon icon-settings" text="Edit" clicked={() => alert('clicked me')} />
					<DropdownButtonSeparator />
					<DropdownButtonItem
						icon="icon icon-notebook"
						text="History"
						clicked={() => {
							alert('clicked history');
						}}
					/>
					<DropdownButtonItem icon="icon icon-trash" text="Delete" clicked={() => confirm('You sure?')} />
				</DropdownButton>
				<br />
				Flex NOT collapsing on mobile
				<FlexContainer fullWidthOnMobile={false}>
					<FlexFormItem>Auto-wrap</FlexFormItem>
					<FlexFormItem>Auto-wrap</FlexFormItem>
					<FlexFormItem flexFill={false} width={100}>
						<div style="background-color:gray">100px</div>
					</FlexFormItem>
					<FlexFormItem flexFill={false} width={50}>
						<div style="background-color:gray">50px</div>
					</FlexFormItem>
				</FlexContainer>
				<br />
				Flex collapsing on mobile
				<FlexContainer fullWidthOnMobile={true}>
					<FlexFormItem>Auto-wrap</FlexFormItem>
					<FlexFormItem>Auto-wrap</FlexFormItem>
					<FlexFormItem flexFill={false} width={100}>
						<div style="background-color:gray">100px</div>
					</FlexFormItem>
					<FlexFormItem flexFill={false} width={50}>
						<div style="background-color:gray">50px</div>
					</FlexFormItem>
				</FlexContainer>
				<Fieldset caption="Sample fields">Here is some inner content</Fieldset>
				<FooterButtons>
					<Button clicked={_e => alert('cancel')} layout={ButtonLayout.Default} icon="fas fa-times" text="Cancel" />
				</FooterButtons>
				<Separator text="Separujem.." />
				<ValidationResultDisplayer
					validationState={{
						errorMessage: 'Unable to proceed, error...',
						mandatory: true,
						valid: false,
						validationDeclaration: null,
					}}
				/>
				<HtmlLiteral innerHTML="Test of <b>HTML Literal</b>" />
				<UploadImageAndCropButton
					text="Upload image and crop"
					icon="icon icon-people"
					layout={ButtonLayout.Danger}
					uploadArgs={null}
					targetBlobContainer="dummy"
					uploadComplete={(_e) => { }}
					uploadUrl="dummy"
				/>
				<br />
				<Accordion>
					<AccordionPage caption="One" badge="0">
						<div>One</div>
					</AccordionPage>
					<AccordionPage caption="Two" badge="3" badgeStyle="warning">
						<div>Two</div>
					</AccordionPage>
					<AccordionPage caption="Three" badge="3" badgeStyle="danger">
						<div>Three</div>
					</AccordionPage>
				</Accordion>
				<br />
				<div>
					<FullCalendarDraggableEvent
						title="Event druhaov"
						dataRow={{ druha: 'jedna' }}
						startDate={Temporal.PlainDateTime.from({
							year: 1900,
							month: 1,
							day: 1,
							hour: 10,
						})}
						endDate={Temporal.PlainDateTime.from({
							year: 1900,
							month: 1,
							day: 1,
							hour: 10,
							minute: 45,
						})}
					/>
					<FullCalendarDraggableEvent
						title="Ej bardzo dva"
						dataRow={{ druha: 'kurva' }}
						startDate={Temporal.PlainDateTime.from({
							year: 1900,
							month: 1,
							day: 1,
							hour: 10,
						})}
						endDate={Temporal.PlainDateTime.from({
							year: 1900,
							month: 1,
							day: 1,
							hour: 10,
							minute: 45,
						})}
					/>
				</div>
				{/* <TimegridCalendar
                    minDate={createDateUniversal(2020, 2, 3)}
                    maxDate={createDateUniversal(2020, 2, 7, 10, 0, 0)}
                    viewType={this.timeViewType as any}
                    resources={[
                        { id: "a", title: "Room a", building: "druha", dataRow: {} },
                        { id: "b", title: "Room BBB", building: "jedna", dataRow: {} },
                    ]}
                    events={this.timeEvents}
                    addClicked={(e) => {
                        this.addTimeEvent(e);
                    }}
                    eventChanged={(e) => {
                        e.blockElem();

                        setTimeout(() => {
                            e.unblockElem();
                        }, 3000);
                    }}
                /> */}
				<br />
				<Modal size={ModalSize.Normal} ref="sampleModal" title="Sample modal" blocked={this.blockModal}>
					<ModalBody>
						<p>Some modal content</p>
					</ModalBody>
					<ModalFooter>
						<Button layout={ButtonLayout.Default} dismissModal={true} text="Close" clicked={() => { }} />
						<Button
							layout={ButtonLayout.Primary}
							text="OK"
							clicked={() => {
								alert('OK clicked...now click close');
							}}
						/>
					</ModalFooter>
				</Modal>
			</div>
		);
	}
}

interface FormArgs {
	text: string;
}

@Component
class CustomDropdownItemComponent extends TsxComponent<FormArgs> implements FormArgs {
	count: number = 0;
	@Prop() text: string;

	render(h) {
		return (
			<div>
				<div onClick={(_e) => {
					// alert('wtf?');
					this.count += 1;
				}}
				>
					{this.text}
					{' '}
					dpc count
					{this.count}
				</div>
			</div>
		);
	}
}

const CustomDropdownItem = toNative(CustomDropdownItemComponent);

const TestAllComponentsPage = toNative(TestAllComponentsPageComponent);
export default TestAllComponentsPage;
