<template>
<div>
	<div v-if="false" style="text-align: center">
		登録された絵文字はありません。
	</div>
	<div v-else class="_gaps">
		<MkFolder>
			<template #icon><i class="ti ti-search"></i></template>
			<template #label>検索設定</template>
			<template #caption>
				検索条件を詳細に設定します。
			</template>

			<div class="_gaps">
				<div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
					<MkInput v-model="queryName" :debounce="true" type="search" autocapitalize="off" class="col1 row1">
						<template #label>name</template>
					</MkInput>
					<MkInput
						v-model="queryCategory" :debounce="true" type="search" autocapitalize="off" class="col2 row1"
					>
						<template #label>category</template>
					</MkInput>
					<MkInput
						v-model="queryAlias" :debounce="true" type="search" autocapitalize="off" class="col3 row1"
					>
						<template #label>alias</template>
					</MkInput>

					<MkInput
						v-model="queryType" :debounce="true" type="search" autocapitalize="off" class="col1 row2"
					>
						<template #label>type</template>
					</MkInput>
					<MkInput
						v-model="queryLicense" :debounce="true" type="search" autocapitalize="off" class="col2 row2"
					>
						<template #label>license</template>
					</MkInput>
					<MkSelect v-model="querySensitive" class="col3 row2">
						<template #label>sensitive</template>
						<option :value="null">-</option>
						<option :value="true">true</option>
						<option :value="false">false</option>
					</MkSelect>

					<MkSelect v-model="queryLocalOnly" class="col1 row3">
						<template #label>localOnly</template>
						<option :value="null">-</option>
						<option :value="true">true</option>
						<option :value="false">false</option>
					</MkSelect>
					<MkInput v-model="queryUpdatedAtFrom" :debounce="true" type="date" autocapitalize="off" class="col2 row3">
						<template #label>updatedAt(from)</template>
					</MkInput>
					<MkInput v-model="queryUpdatedAtTo" :debounce="true" type="date" autocapitalize="off" class="col3 row3">
						<template #label>updatedAt(to)</template>
					</MkInput>
				</div>
				<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
					<MkButton primary @click="onSearchButtonClicked">
						{{ i18n.ts.search }}
					</MkButton>
					<MkButton @click="onQueryResetButtonClicked">
						リセット
					</MkButton>
				</div>
			</div>
		</MkFolder>

		<MkFolder>
			<template #icon><i class="ti ti-notes"></i></template>
			<template #label>登録ログ</template>
			<template #caption>
				絵文字更新・削除時のログが表示されます。更新・削除操作を行ったり、ページをリロードすると消えます。
			</template>

			<XRegisterLogs :logs="requestLogs"/>
		</MkFolder>

		<div :class="$style.gridArea">
			<MkGrid :data="gridItems" :gridSetting="gridSetting" :columnSettings="columnSettings" @event="onGridEvent"/>
		</div>

		<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>

		<div class="_gaps">
			<div :class="$style.buttons">
				<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
				<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
					{{
						i18n.ts.update
					}}
				</MkButton>
				<MkButton @click="onGridResetButtonClicked">リセット</MkButton>
			</div>
		</div>
	</div>
</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os.js';
import {
	emptyStrToEmptyArray,
	emptyStrToNull,
	emptyStrToUndefined,
	RequestLogItem,
} from '@/pages/admin/custom-emojis-grid.impl.js';
import MkGrid from '@/components/grid/MkGrid.vue';
import { i18n } from '@/i18n.js';
import MkInput from '@/components/MkInput.vue';
import MkButton from '@/components/MkButton.vue';
import { GridColumnSetting } from '@/components/grid/column.js';
import { validators } from '@/components/grid/cell-validators.js';
import {
	GridCellContextMenuEvent,
	GridCellValidationEvent,
	GridCellValueChangeEvent,
	GridCurrentState,
	GridEvent,
	GridKeyDownEvent,
	GridRowContextMenuEvent,
} from '@/components/grid/grid-event.js';
import { optInGridUtils } from '@/components/grid/optin-utils.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import MkPagingButtons from '@/components/MkPagingButtons.vue';
import XRegisterLogs from '@/pages/admin/custom-emojis-grid.local.logs.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSelect from '@/components/MkSelect.vue';
import { deviceKind } from '@/scripts/device-kind.js';
import { GridRowSetting } from '@/components/grid/row.js';

type GridItem = {
	checked: boolean;
	id: string;
	url: string;
	name: string;
	host: string;
	category: string;
	aliases: string;
	license: string;
	isSensitive: boolean;
	localOnly: boolean;
	roleIdsThatCanBeUsedThisEmojiAsReaction: string;
	fileId?: string;
}

const gridSetting: GridRowSetting = {
	showNumber: true,
	selectable: false,
};

const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const columnSettings: GridColumnSetting[] = [
	{ bindTo: 'checked', icon: 'ti-trash', type: 'boolean', editable: true, width: 34 },
	{ bindTo: 'url', icon: 'ti-icons', type: 'image', editable: false, width: 'auto', validators: [required] },
	{ bindTo: 'name', title: 'name', type: 'text', editable: true, width: 140, validators: [required, regex] },
	{ bindTo: 'category', title: 'category', type: 'text', editable: true, width: 140 },
	{ bindTo: 'aliases', title: 'aliases', type: 'text', editable: true, width: 140 },
	{ bindTo: 'license', title: 'license', type: 'text', editable: true, width: 140 },
	{ bindTo: 'isSensitive', title: 'sensitive', type: 'boolean', editable: true, width: 90 },
	{ bindTo: 'localOnly', title: 'localOnly', type: 'boolean', editable: true, width: 90 },
	{ bindTo: 'roleIdsThatCanBeUsedThisEmojiAsReaction', title: 'role', type: 'text', editable: true, width: 140 },
];

const customEmojis = ref<Misskey.entities.EmojiDetailedAdmin[]>([]);
const allPages = ref<number>(0);
const currentPage = ref<number>(0);

const queryName = ref<string | null>(null);
const queryCategory = ref<string | null>(null);
const queryAlias = ref<string | null>(null);
const queryType = ref<string | null>(null);
const queryLicense = ref<string | null>(null);
const queryUpdatedAtFrom = ref<string | null>(null);
const queryUpdatedAtTo = ref<string | null>(null);
const querySensitive = ref<string | null>(null);
const queryLocalOnly = ref<string | null>(null);
const previousQuery = ref<string | undefined>(undefined);

const requestLogs = ref<RequestLogItem[]>([]);

const gridItems = ref<GridItem[]>([]);
const originGridItems = ref<GridItem[]>([]);
const updateButtonDisabled = ref<boolean>(false);

const spMode = computed(() => ['smartphone', 'tablet'].includes(deviceKind));

async function onUpdateButtonClicked() {
	const _items = gridItems.value;
	const _originItems = originGridItems.value;
	if (_items.length !== _originItems.length) {
		throw new Error('The number of items has been changed. Please refresh the page and try again.');
	}

	const confirm = await os.confirm({
		type: 'info',
		title: '確認',
		text: '絵文字の変更を保存します。よろしいですか？',
	});
	if (confirm.canceled) {
		return;
	}

	const updatedItems = _items.filter((it, idx) => !it.checked && JSON.stringify(it) !== JSON.stringify(_originItems[idx]));
	if (updatedItems.length === 0) {
		await os.alert({
			type: 'info',
			text: '変更された絵文字はありません。',
		});
		return;
	}

	const action = () => {
		return updatedItems.map(item =>
			misskeyApi(
				'admin/emoji/update',
				{
					// eslint-disable-next-line
					id: item.id!,
					name: item.name,
					category: emptyStrToNull(item.category),
					aliases: emptyStrToEmptyArray(item.aliases),
					license: emptyStrToNull(item.license),
					isSensitive: item.isSensitive,
					localOnly: item.localOnly,
					roleIdsThatCanBeUsedThisEmojiAsReaction: emptyStrToEmptyArray(item.roleIdsThatCanBeUsedThisEmojiAsReaction),
					fileId:	item.fileId,
				})
				.then(() => ({ item, success: true, err: undefined }))
				.catch(err => ({ item, success: false, err })),
		);
	};

	const result = await os.promiseDialog(Promise.all(action()));
	const failedItems = result.filter(it => !it.success);

	if (failedItems.length > 0) {
		await os.alert({
			type: 'error',
			title: 'エラー',
			text: '絵文字の更新・削除に失敗しました。詳細は登録ログをご確認ください。',
		});
	}

	requestLogs.value = result.map(it => ({
		failed: !it.success,
		url: it.item.url,
		name: it.item.name,
		error: it.err ? JSON.stringify(it.err) : undefined,
	}));

	await refreshCustomEmojis();
}

async function onDeleteButtonClicked() {
	const _items = gridItems.value;
	const _originItems = originGridItems.value;
	if (_items.length !== _originItems.length) {
		throw new Error('The number of items has been changed. Please refresh the page and try again.');
	}

	const confirm = await os.confirm({
		type: 'info',
		title: '確認',
		text: 'チェックをつけられた絵文字を削除します。よろしいですか？',
	});
	if (confirm.canceled) {
		return;
	}

	const deleteItems = _items.filter((it) => it.checked);
	if (deleteItems.length === 0) {
		await os.alert({
			type: 'info',
			text: '削除対象の絵文字はありません。',
		});
		return;
	}

	async function action() {
		const deleteIds = deleteItems.map(it => it.id!);
		await misskeyApi('admin/emoji/delete-bulk', { ids: deleteIds });
	}

	await os.promiseDialog(
		action(),
	);
}

function onGridResetButtonClicked() {
	refreshGridItems();
}

async function onSearchButtonClicked() {
	await refreshCustomEmojis();
}

function onQueryResetButtonClicked() {
	queryName.value = null;
	queryCategory.value = null;
	queryAlias.value = null;
	queryType.value = null;
	queryLicense.value = null;
	queryUpdatedAtFrom.value = null;
	queryUpdatedAtTo.value = null;
	querySensitive.value = null;
	queryLocalOnly.value = null;
}

async function onPageChanged(pageNumber: number) {
	currentPage.value = pageNumber;
	await refreshCustomEmojis();
}

function onGridEvent(event: GridEvent, currentState: GridCurrentState) {
	switch (event.type) {
		case 'cell-validation':
			onGridCellValidation(event);
			break;
		case 'row-context-menu':
			onGridRowContextMenu(event, currentState);
			break;
		case 'cell-context-menu':
			onGridCellContextMenu(event, currentState);
			break;
		case 'cell-value-change':
			onGridCellValueChange(event);
			break;
		case 'keydown':
			onGridKeyDown(event, currentState);
			break;
	}
}

function onGridCellValidation(event: GridCellValidationEvent) {
	updateButtonDisabled.value = event.all.filter(it => !it.valid).length > 0;
}

function onGridRowContextMenu(event: GridRowContextMenuEvent, currentState: GridCurrentState) {
	event.menuItems.push(
		{
			type: 'button',
			text: '選択行をコピー',
			icon: 'ti ti-copy',
			action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
		},
		{
			type: 'button',
			text: '選択行を削除対象とする',
			icon: 'ti ti-trash',
			action: () => {
				for (const row of currentState.rangedRows) {
					gridItems.value[row.index].checked = true;
				}
			},
		},
	);
}

function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: GridCurrentState) {
	event.menuItems.push(
		{
			type: 'button',
			text: '選択範囲をコピー',
			icon: 'ti ti-copy',
			action: () => optInGridUtils.copyToClipboard(gridItems, currentState),
		},
		{
			type: 'button',
			text: '選択範囲を削除',
			icon: 'ti ti-trash',
			action: () => optInGridUtils.deleteSelectionRange(gridItems, currentState),
		},
		{
			type: 'button',
			text: '選択行を削除対象とする',
			icon: 'ti ti-trash',
			action: () => {
				for (const rowIdx of [...new Set(currentState.rangedCells.map(it => it.row.index)).values()]) {
					gridItems.value[rowIdx].checked = true;
				}
			},
		},
	);
}

function onGridCellValueChange(event: GridCellValueChangeEvent) {
	const { row, column, newValue } = event;
	if (gridItems.value.length > row.index && column.setting.bindTo in gridItems.value[row.index]) {
		if (column.setting.bindTo === 'url') {
			const file = JSON.parse(newValue as string) as Misskey.entities.DriveFile;
			gridItems.value[row.index].url = file.url;
			gridItems.value[row.index].fileId = file.id;
		} else {
			gridItems.value[row.index][column.setting.bindTo] = newValue;
		}

		const originItem = originGridItems.value[row.index][column.setting.bindTo];
		if (originItem !== newValue) {
			row.additionalStyle = {
				className: 'editedRow',
			};
		} else {
			row.additionalStyle = undefined;
		}
	}
}

async function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
	const { ctrlKey, shiftKey, code } = event.event;

	switch (true) {
		case ctrlKey && shiftKey: {
			break;
		}
		case ctrlKey: {
			switch (code) {
				case 'KeyC': {
					optInGridUtils.copyToClipboard(gridItems, currentState);
					break;
				}
				case 'KeyV': {
					await optInGridUtils.pasteFromClipboard(gridItems, currentState);
					break;
				}
			}
			break;
		}
		case shiftKey: {
			break;
		}
		default: {
			switch (code) {
				case 'Delete': {
					if (currentState.rangedRows.length > 0) {
						for (const row of currentState.rangedRows) {
							gridItems.value[row.index].checked = true;
						}
					} else {
						const ranges = currentState.rangedCells;
						for (const cell of ranges) {
							if (cell.column.setting.editable) {
								gridItems.value[cell.row.index][cell.column.setting.bindTo] = undefined;
								const originItem = originGridItems.value[cell.row.index][cell.column.setting.bindTo];
								if (originItem !== undefined) {
									cell.row.additionalStyle = {
										className: 'editedRow',
									};
								} else {
									cell.row.additionalStyle = undefined;
								}
							}
						}
					}
					break;
				}
			}
			break;
		}
	}
}

async function refreshCustomEmojis() {
	const limit = 100;

	const query: Misskey.entities.AdminEmojiV2ListRequest['query'] = {
		name: emptyStrToUndefined(queryName.value),
		type: emptyStrToUndefined(queryType.value),
		aliases: emptyStrToUndefined(queryAlias.value),
		category: emptyStrToUndefined(queryCategory.value),
		license: emptyStrToUndefined(queryLicense.value),
		isSensitive: querySensitive.value ? Boolean(querySensitive.value).valueOf() : undefined,
		localOnly: queryLocalOnly.value ? Boolean(queryLocalOnly.value).valueOf() : undefined,
		updatedAtFrom: emptyStrToUndefined(queryUpdatedAtFrom.value),
		updatedAtTo: emptyStrToUndefined(queryUpdatedAtTo.value),
		hostType: 'local',
	};

	if (JSON.stringify(query) !== previousQuery.value) {
		currentPage.value = 1;
	}

	const result = await os.promiseDialog(
		misskeyApi('admin/emoji/v2/list', {
			query: query,
			limit: limit,
			page: currentPage.value,
		}),
		() => {
		},
		() => {
		},
	);

	customEmojis.value = result.emojis;
	allPages.value = result.allPages;

	previousQuery.value = JSON.stringify(query);

	refreshGridItems();
}

function refreshGridItems() {
	gridItems.value = customEmojis.value.map(it => ({
		checked: false,
		id: it.id,
		fileId: undefined,
		url: it.publicUrl,
		name: it.name,
		host: it.host ?? '',
		category: it.category ?? '',
		aliases: it.aliases.join(', '),
		license: it.license ?? '',
		isSensitive: it.isSensitive,
		localOnly: it.localOnly,
		roleIdsThatCanBeUsedThisEmojiAsReaction: it.roleIdsThatCanBeUsedThisEmojiAsReaction.join(', '),
	}));
	originGridItems.value = JSON.parse(JSON.stringify(gridItems.value));
}

onMounted(async () => {
	await refreshCustomEmojis();
});

</script>

<style lang="scss">
.editedRow {
	background-color: var(--infoBg);
}

.row1 {
	grid-row: 1 / 2;
}

.row2 {
	grid-row: 2 / 3;
}

.row3 {
	grid-row: 3 / 4;
}

.row4 {
	grid-row: 4 / 5;
}

.col1 {
	grid-column: 1 / 2;
}

.col2 {
	grid-column: 2 / 3;
}

.col3 {
	grid-column: 3 / 4;
}
</style>

<style module lang="scss">
.searchArea {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}

.searchAreaSp {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.searchButtons {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 8px;
}

.searchButtonsSp {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.gridArea {
	overflow: scroll;
	padding-top: 8px;
	padding-bottom: 8px;
	resize: vertical;
}

.buttons {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

</style>
