<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div class="_gaps_m">
	<MkFolder>
		<template #icon><i class="ti ti-flask"></i></template>
		<template #label>{{ i18n.ts.misskeyExperimentalFeatures }}</template>

		<div class="_gaps_m">
			<MkSwitch v-model="enableCondensedLineForAcct">
				<template #label>Enable condensed line for acct</template>
			</MkSwitch>
		</div>
	</MkFolder>

	<FormSection>
		<template #label><i class="ti ti-time-duration-off"></i> {{ i18n.ts.autoRemoval }}</template>
		<template #description>{{ i18n.ts.autoRemovalDescription }}</template>

		<div v-if="$i.policies.canUseAutoNoteRemoval" class="_gaps_m">
			<MkInfo warn rounded>
				{{ i18n.ts.thisIsExperimentalFeature }}
			</MkInfo>

			<MkSwitch v-model="autoRemoval" @update:modelValue="saveRemovalCondition()">{{ i18n.ts._autoRemoval.use }}</MkSwitch>

			<template v-if="autoRemoval">
				<MkInput v-model="deleteAfter" :type="'number'" :placeholder="'7'" :required="true" @update:modelValue="periodChanged = true">
					<template #label>{{ i18n.ts._autoRemoval.deleteAfter }}</template>
					<template #caption>{{ i18n.ts._autoRemoval.deleteAfterDescription }}</template>
				</MkInput>
				<MkButton v-if="periodChanged" primary class="save" @click="saveRemovalCondition"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>

				<MkSwitch v-model="noPiningNotes" @update:modelValue="saveRemovalCondition()">
					<template #label>{{ i18n.ts._autoRemoval.noPiningNotes }}</template>
					<template #caption>{{ i18n.ts._autoRemoval.noPiningNotesDescription }}</template>
				</MkSwitch>

				<MkSwitch v-model="noSpecifiedNotes" @update:modelValue="saveRemovalCondition()">
					<template #label>{{ i18n.ts._autoRemoval.noSpecifiedNotes }}</template>
					<template #caption>{{ i18n.ts._autoRemoval.noSpecifiedNotesDescription }}</template>
				</MkSwitch>
			</template>
		</div>
		<div v-else class="_gaps_m">
			<MkInfo>{{ i18n.ts._autoRemoval.youCantUseThisTime }}</MkInfo>
		</div>
	</FormSection>

	<FormSection>
		<template #label><i class="ti ti-lock-access"></i> {{ i18n.ts.hideSensitiveInformation }}</template>
		<template #description>{{ i18n.ts._hideSensitiveInformation.about }}</template>

		<div class="_gaps_m">
			<MkInfo warn rounded>
				{{ i18n.ts.thisIsExperimentalFeature }}
			</MkInfo>

			<MkSwitch v-model="privateMode">
				{{ i18n.ts._hideSensitiveInformation.use }}
			</MkSwitch>
			<MkFolder v-if="privateMode">
				<template #label>{{ i18n.ts._hideSensitiveInformation.directMessages }}</template>
				<template v-if="hideDirectMessages" #suffix>{{ i18n.ts._hideSensitiveInformation.itsHidden }}</template>
				<template v-else #suffix>{{ i18n.ts._hideSensitiveInformation.itsNotHidden }}</template>
				<MkSwitch v-model="hideDirectMessages">
					{{ i18n.ts._hideSensitiveInformation.directMessagesUse }}
					<template #caption>{{ i18n.ts._hideSensitiveInformation.directMessagesDescription }}</template>
				</MkSwitch>
			</MkFolder>
			<MkFolder v-if="privateMode">
				<template #label>{{ i18n.ts._hideSensitiveInformation.drive }}</template>
				<template v-if="hideDriveFileList" #suffix>{{ i18n.ts._hideSensitiveInformation.itsHidden }}</template>
				<template v-else #suffix>{{ i18n.ts._hideSensitiveInformation.itsNotHidden }}</template>
				<MkSwitch v-model="hideDriveFileList">
					{{ i18n.ts._hideSensitiveInformation.driveUse }}
					<template #caption>{{ i18n.ts._hideSensitiveInformation.driveDescription }}</template>
				</MkSwitch>
			</MkFolder>
			<MkFolder v-if="privateMode && iAmModerator">
				<template #label>{{ i18n.ts._hideSensitiveInformation.moderationLog }}</template>
				<template v-if="hideModerationLog" #suffix>{{ i18n.ts._hideSensitiveInformation.itsHidden }}</template>
				<template v-else #suffix>{{ i18n.ts._hideSensitiveInformation.itsNotHidden }}</template>
				<MkSwitch v-model="hideModerationLog">
					{{ i18n.ts._hideSensitiveInformation.moderationLogUse }}
					<template #caption>{{ i18n.ts._hideSensitiveInformation.moderationLogDescription }}</template>
				</MkSwitch>
			</MkFolder>
			<MkFolder v-if="privateMode && iAmModerator">
				<template #label>{{ i18n.ts._hideSensitiveInformation.roles }}</template>
				<template v-if="hideRoleList" #suffix>{{ i18n.ts._hideSensitiveInformation.itsHidden }}</template>
				<template v-else #suffix>{{ i18n.ts._hideSensitiveInformation.itsNotHidden }}</template>
				<MkSwitch v-model="hideRoleList">
					{{ i18n.ts._hideSensitiveInformation.rolesUse }}
					<template #caption>{{ i18n.ts._hideSensitiveInformation.rolesDescription }}</template>
				</MkSwitch>
			</MkFolder>
		</div>
	</FormSection>

	<FormSection v-if="$i.isModerator">
		<template #label><i class="ti ti-beach"></i> {{ i18n.ts.vacationMode }}</template>
		<template #description>{{ i18n.ts.vacationModeDescription }}</template>

		<div class="_gaps_m">
			<MkInfo warn rounded>
				{{ i18n.ts.thisIsExperimentalFeature }}
			</MkInfo>

			<MkSwitch v-model="isVacation" @update:modelValue="save()">
				{{ i18n.ts.useVacationMode }}
			</MkSwitch>
		</div>
	</FormSection>

	<FormSection>
		<template #label><i class="ti ti-globe-off"></i> {{ i18n.ts.mindControl }}</template>
		<template #description>{{ i18n.ts.mindControlDescription }}</template>

		<div class="_gaps_m">
			<MkInfo warn rounded>
				{{ i18n.ts.thisIsExperimentalFeature }}
			</MkInfo>

			<MkSwitch v-model="hideCounters">
				{{ i18n.ts.hideCounters }}
				<template #caption>{{ i18n.ts.hideCountersDescription }}</template>
			</MkSwitch>
		</div>
	</FormSection>
</div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
// import MkSelect from '@/components/MkSelect.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkInfo from '@/components/MkInfo.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { iAmModerator, signinRequired } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { defaultStore } from '@/store.js';
import * as os from '@/os.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/MkInput.vue";

const $i = signinRequired();
const isVacation = ref<boolean | undefined>($i.isVacation !== null ? $i.isVacation : undefined);
const autoRemoval = ref<boolean>($i.autoRemovalCondition.active);
const deleteAfter = ref<number>($i.autoRemovalCondition.deleteAfter || 7);
const noPiningNotes = ref<boolean>($i.autoRemovalCondition.noPiningNotes);
const noSpecifiedNotes = ref<boolean>($i.autoRemovalCondition.noSpecifiedNotes);
const periodChanged = ref<boolean>(false);

const hideCounters = computed(defaultStore.makeGetterSetter('hideCounters'));
const enableCondensedLineForAcct = computed(defaultStore.makeGetterSetter('enableCondensedLineForAcct'));
const privateMode = computed(defaultStore.makeGetterSetter('privateMode'));
const hideDirectMessages = computed(defaultStore.makeGetterSetter('hideDirectMessages'));
const hideDriveFileList = computed(defaultStore.makeGetterSetter('hideDriveFileList'));
const hideModerationLog = computed(defaultStore.makeGetterSetter('hideModerationLog'));
const hideRoleList = computed(defaultStore.makeGetterSetter('hideRoleList'));

function saveRemovalCondition() {
	misskeyApi('i/update-removal-condition', {
		active: autoRemoval.value,
		deleteAfter: deleteAfter.value,
		noPiningNotes: noPiningNotes.value,
		noSpecifiedNotes: noSpecifiedNotes.value,
	});
}

function save() {
	if (isVacation.value === true) {
		defaultStore.set('vacationAlert', true);
	}
	misskeyApi('i/update', {
		isVacation: isVacation.value,
	});
}

async function reloadAsk() {
	const { canceled } = await os.confirm({
		type: 'info',
		text: i18n.ts.reloadToApplySetting,
	});
	if (canceled) return;

	unisonReload();
}

watch([
	isVacation,
	enableCondensedLineForAcct,
	privateMode,
	hideCounters,
	hideDirectMessages,
	hideDriveFileList,
	hideRoleList,
	hideModerationLog,
], async () => {
	await reloadAsk();
});

const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(() => ({
	title: i18n.ts.experimentalFeatures,
	icon: 'ti ti-barrier-block',
}));
</script>
