import createWidgetBase from '@dojo/widgets/createWidgetBase';
import { Widget, WidgetProperties } from '@dojo/widgets/interfaces';
import createFormFieldMixin, { FormFieldMixin } from '@dojo/widgets/mixins/createFormFieldMixin';
import { VNodeProperties } from '@dojo/interfaces/vdom';

export interface CheckboxInputProperties extends WidgetProperties {
	checked: boolean;
	onChange?: (event?: Event) => void;
}

export type CheckboxInput = Widget<CheckboxInputProperties> & FormFieldMixin<string, CheckboxInputProperties> & {
	onChange: (event?: Event) => void;
};

const createCheckboxInput = createWidgetBase
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			tagName: 'input',
			type: 'checkbox',
			onChange(this: CheckboxInput, event?: Event) {
				this.properties.onChange && this.properties.onChange(event);
			},
			nodeAttributes: [
				function (this: CheckboxInput): VNodeProperties {
					const { onChange: onchange } = this;
					const { checked } = this.state;

					return checked !== undefined ? { checked, onchange } : { onchange };
				}
			]

	focused?: boolean;
	placeholder?: string;
	value?: string;
	onKeyUp?: (event?: KeyboardEvent) => void;
	onInput?: (event?: KeyboardEvent) => void;
	onBlur?: (event?: Event) => void;
}

export type FocusableTextInput = Widget<FocusableTextProperties> & FormFieldMixin<string, WidgetProperties> & {
	onKeyUp: (event?: KeyboardEvent) => void;
	onInput: (event?: KeyboardEvent) => void;
	onBlur: (event?: Event) => void;
	afterCreate: (element: HTMLInputElement) => void;
}

const createFocusableTextInput = createWidgetBase
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			tagName: 'input',
			type: 'text',

			onBlur(this: FocusableTextInput, event?: Event) {
				this.properties.onBlur && this.properties.onBlur(event);
			},
			onInput(this: FocusableTextInput, event?: KeyboardEvent) {
				this.properties.onInput && this.properties.onInput(event);
			},
			onKeyUp(this: FocusableTextInput, event?: KeyboardEvent) {
				this.properties.onKeyUp && this.properties.onKeyUp(event);
			},

export type FormattedDate = Widget<FormattedDateProperties>;

const createFormattedDate = createWidgetBase.mixin({
	mixin: {
		tagName: 'span',
		nodeAttributes: [
			function (this: FormattedDate): VNodeProperties {
				const { date = new Date() } = this.state;
				let hours = date.getHours();
				const minutes = String(date.getMinutes());
				let suffix = 'am';

				if (hours >= 12) {
					suffix = 'pm';

					hours = hours % 12;
					if (!hours) {
						hours = 12;
					}
				}

				return {
					innerHTML: `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} at ${hours}:${padStart(minutes, 2, '0')}${suffix}`
				};
			}
		]
	}
});

export default createFormattedDate;

import { Widget } from '@dojo/widgets/interfaces';
import { VNodeProperties } from '@dojo/interfaces/vdom';
import createWidgetBase from '@dojo/widgets/createWidgetBase';

interface TitleProperties {
	label: string;
}

const createTitle = createWidgetBase.mixin({
	mixin: {
		tagName: 'h1',
		nodeAttributes: [
			function (this: Widget<TitleProperties>): VNodeProperties {
				return { innerHTML: this.properties.label };
			}
		]
	}
});

export default createTitle;

		const label = filterItem[0].toUpperCase() + filterItem.substring(1);
		return v('li', {}, [
			v('a', {
				innerHTML: label,
				href: router.link(mainRoute, {
					filter: filterItem,
					view: activeView
				}),
				classes: {
					selected: activeFilter === filterItem
				}
			})
		]);
	});
}

const createTodoFilter = createWidgetBase.mixin({
	mixin: {
		tagName: 'ul',
		classes: [ 'filters' ],
		getChildrenNodes: function(this: TodoFilter): DNode[] {
			const activeFilter = this.properties.activeFilter || '';
			const activeView = this.properties.activeView || '';

			return createFilterItems(activeFilter, activeView);
		}
	}
});

export default createTodoFilter;

import { VNodeProperties } from '@dojo/interfaces/vdom';
import createWidget from '@dojo/widgets/createWidgetBase';
import { WidgetProperties, Widget } from '@dojo/widgets/interfaces';
import createFormFieldMixin from '@dojo/widgets/mixins/createFormFieldMixin';

export interface SearchInputProperties extends WidgetProperties {
	onKeyUp?: (event?: KeyboardEvent) => void;
}

export type SearchInput = Widget<SearchInputProperties> & {
	onKeyUp?: (event?: KeyboardEvent) => void;
}

const createSearchInput = createWidget
	.mixin(createFormFieldMixin)
	.mixin({
		mixin: {
			classes: [ 'search' ],
			tagName: 'input',
			type: 'text',
			onKeyUp(this: SearchInput, event?: KeyboardEvent) {
				this.properties.onKeyUp && this.properties.onKeyUp(event);
			},
			nodeAttributes: [
				function (this: SearchInput): VNodeProperties {
					const { onKeyUp: onkeyup } = this;
					const { placeholder = '' } = this.properties;

					return {
						placeholder,
						onkeyup

const createViewChooser = createWidgetBase.mixin({
	mixin: {
		tagName: 'ul',
		classes: [ 'view-chooser' ],
		getChildrenNodes: function (this: TodoList): DNode[] {
			const { activeView = 'list', activeFilter = 'all' } = this.state;

			return [
				v('li.view-mode', {}, [
					v('a', {
						href: router.link(mainRoute, {
							filter: activeFilter,
							view: 'list'
						}),
						classes: {
							list: true,
							active: activeView === 'list'
						}
					})
				]),
				v('li.view-mode', {}, [
					v('a', {
						href: router.link(mainRoute, {
							filter: activeFilter,
							view: 'cards'
						}),
						classes: {
							cards: true,
							active: activeView === 'cards'
						}
					})
				])
			];
		}
	}
});