import { _ } from '../../locale';
import CommandService from '../CommandService';
import { ItemFlow, ListRenderer, OnClickEvent } from '../plugins/api/noteListType';

const renderer: ListRenderer = {
	id: 'detailed',

	label: async () => _('Detailed'),

	flow: ItemFlow.TopToBottom,

	dependencies: [
		'note.todo_completed',
		'item.selected',
		'note.is_shared',
		'note.isWatched',
	],

	multiColumns: true,

	itemSize: {
		width: 0,
		height: 34,
	},

	itemCss: // css
		`	
		& {
			display: block;
		}

		> .row {
			display: flex;
			height: 100%;

			> .item {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 8px;
				overflow: hidden;
				opacity: 0.6;

				> .content {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					> .checkbox > input {
						padding: 0;
						margin: 0;
					}
				}
			}

			> .item[data-name="note.is_todo"],
			> .item[data-name="note.title"] {
				opacity: 1;
			}

			> .item > .content > .watchedicon {
				display: none;
				margin-right: 8px;
			}
		}

		> .row.-watched > .item[data-name="note.title"] > .content > .watchedicon {
			display: inline-block;
		}

		> .row.-selected {
			background-color: var(--joplin-selected-color);
		}

		> .row.-shared {
			color: var(--joplin-color-warn3);
		}

		> .row.-completed {
			opacity: 0.5;
		}
			
		> .row:hover, &.-focus-visible > .row {
			background-color: var(--joplin-background-color-hover3);
		}
	`,

	onHeaderClick: async (event: OnClickEvent) => {
		const field = event.elementId === 'title' ? 'title' : 'user_updated_time';
		void CommandService.instance().execute('toggleNotesSortOrderField', field);
	},

	itemTemplate: // html
		`
			<div class="row {{#item.selected}}-selected{{/item.selected}} {{#note.is_shared}}-shared{{/note.is_shared}} {{#note.todo_completed}}-completed{{/note.todo_completed}} {{#note.isWatched}}-watched{{/note.isWatched}}">
				{{#cells}}
					<div data-name="{{name}}" class="item" style="{{{styleHtml}}}">
						<div class="content">
							<i class="watchedicon fa fa-share-square"></i>{{{contentHtml}}}
						</div>
					</div>
				{{/cells}}
			</div>
		`,

	itemValueTemplates: {
		'note.is_todo': // html
			`
			{{#note.is_todo}}
				<div class="checkbox">
					<input
						data-id="todo-checkbox"
						type="checkbox"
						aria-label="{{note.todoStatusText}}"
						tabindex="-1"
						{{#note.todo_completed}}checked="checked"{{/note.todo_completed}}>
				</div>
			{{/note.is_todo}}
		`,
	},

	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
	onRenderNote: async (props: any) => {
		return {
			...props,
		};
	},
};

export default renderer;