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

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

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

	flow: ItemFlow.TopToBottom,

	dependencies: [
		'note.todo_completed',
		'item.selected',
		'note.conflict_original_id',
		'note.is_conflict',
		'note.is_locked',
		'note.is_published',
		'note.is_shared',
		'note.share_id',
		'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"],
			> .item[data-name="note.checkboxes"] {
				opacity: 1;
			}

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

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

			> .item > .content > .syncdisabledicon {
				background-color: var(--joplin-color-faded);
				display: none;
				flex-shrink: 0;
				height: 14px;
				margin-right: 8px;
				mask: url('vendor/lib/images/cloud-offline-outline.svg') center / contain no-repeat;
				-webkit-mask: url('vendor/lib/images/cloud-offline-outline.svg') center / contain no-repeat;
				vertical-align: -3px;
				width: 14px;
			}
		}

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

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

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

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

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

		> .row.-published {
			color: var(--joplin-color4);
		}

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

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

		${checkboxPieCss}
	`,

	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.is_published}}-published{{/note.is_published}} {{#note.todo_completed}}-completed{{/note.todo_completed}} {{#note.isWatched}}-watched{{/note.isWatched}} {{#note.syncDisabled}}-sync-disabled{{/note.syncDisabled}} {{#note.is_locked}}-locked{{/note.is_locked}}">
				{{#cells}}
					<div data-name="{{name}}" class="item" style="{{{styleHtml}}}">
						<div class="content">
							<i class="syncdisabledicon" role="img" aria-label="{{note.syncDisabledLabel}}"></i><i class="watchedicon fa fa-share-square"></i><i class="lockedicon fa fa-lock" role="img" aria-label="{{note.lockedLabel}}"></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}}
		`,
		'note.checkboxes': // html
			`
			{{#note.checkboxes}}
				<div class="checkbox-pie" title="{{note.checkboxes.checked}}/{{note.checkboxes.total}}">
					{{#note.checkboxes.isComplete}}
						<div class="pie -complete">✓</div>
					{{/note.checkboxes.isComplete}}
					{{^note.checkboxes.isComplete}}
						<div class="pie" style="--percent: {{note.checkboxes.percent}};"></div>
					{{/note.checkboxes.isComplete}}
				</div>
			{{/note.checkboxes}}
		`,
	},

	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Matches OnRenderNoteHandler in noteListType.ts; props are heterogeneous (any subset of note fields per renderer's itemProps)
	onRenderNote: async (props: any) => {
		return {
			...props,
			note: {
				...props.note,
				is_locked: isNoteLockEnabled() ? props.note.is_locked : 0,
				lockedLabel: _('Locked'),
				syncDisabled: isSyncDisabledConflict(props.note),
				syncDisabledLabel: _('Local only'),
			},
		};
	},
};

export default renderer;