<template>
    <div class="_formRoot rsljpzjq">
        <div v-adaptive-border class="rfqxtzch _panel _formBlock">
            <div class="toggle">
                <div class="toggleWrapper">
                    <input
                        id="dn"
                        v-model="darkMode"
                        type="checkbox"
                        class="dn"
                    />
                    <label for="dn" class="toggle">
                        <span class="before">{{ i18n.ts.light }}</span>
                        <span class="after">{{ i18n.ts.dark }}</span>
                        <span class="toggle__handler">
                            <span class="crater crater--1"></span>
                            <span class="crater crater--2"></span>
                            <span class="crater crater--3"></span>
                        </span>
                        <span class="star star--1"></span>
                        <span class="star star--2"></span>
                        <span class="star star--3"></span>
                        <span class="star star--4"></span>
                        <span class="star star--5"></span>
                        <span class="star star--6"></span>
                    </label>
                </div>
            </div>
            <div class="sync">
                <FormSwitch v-model="syncDeviceDarkMode">{{
                    i18n.ts.syncDeviceDarkMode
                }}</FormSwitch>
            </div>
        </div>

        <div class="selects _formBlock">
            <FormSelect v-model="lightThemeId" large class="select">
                <template #label>{{ i18n.ts.themeForLightMode }}</template>
                <template #prefix
                    ><i class="ph-sun ph-bold ph-lg"></i
                ></template>
                <option
                    v-if="instanceLightTheme"
                    :key="'instance:' + instanceLightTheme.id"
                    :value="instanceLightTheme.id"
                >
                    {{ instanceLightTheme.name }}
                </option>
                <optgroup
                    v-if="installedLightThemes.length > 0"
                    :label="i18n.ts._theme.installedThemes"
                >
                    <option
                        v-for="x in installedLightThemes"
                        :key="'installed:' + x.id"
                        :value="x.id"
                    >
                        {{ x.name }}
                    </option>
                </optgroup>
                <optgroup :label="i18n.ts._theme.builtinThemes">
                    <option
                        v-for="x in builtinLightThemes"
                        :key="'builtin:' + x.id"
                        :value="x.id"
                    >
                        {{ x.name }}
                    </option>
                </optgroup>
            </FormSelect>
            <FormSelect v-model="darkThemeId" large class="select">
                <template #label>{{ i18n.ts.themeForDarkMode }}</template>
                <template #prefix
                    ><i class="ph-moon ph-bold ph-lg"></i
                ></template>
                <option
                    v-if="instanceDarkTheme"
                    :key="'instance:' + instanceDarkTheme.id"
                    :value="instanceDarkTheme.id"
                >
                    {{ instanceDarkTheme.name }}
                </option>
                <optgroup
                    v-if="installedDarkThemes.length > 0"
                    :label="i18n.ts._theme.installedThemes"
                >
                    <option
                        v-for="x in installedDarkThemes"
                        :key="'installed:' + x.id"
                        :value="x.id"
                    >
                        {{ x.name }}
                    </option>
                </optgroup>
                <optgroup :label="i18n.ts._theme.builtinThemes">
                    <option
                        v-for="x in builtinDarkThemes"
                        :key="'builtin:' + x.id"
                        :value="x.id"
                    >
                        {{ x.name }}
                    </option>
                </optgroup>
            </FormSelect>
        </div>

        <FormSection>
            <div class="_formLinksGrid">
                <FormLink to="/settings/theme/manage"
                    ><template #icon
                        ><i
                            class="ph-folder-notch-open ph-bold ph-lg"
                        ></i></template
                    >{{ i18n.ts._theme.manage
                    }}<template #suffix>{{ themesCount }}</template></FormLink
                >
                <FormLink to="https://assets.misskey.io/theme/list" external
                    ><template #icon
                        ><i class="ph-planet ph-bold ph-lg"></i></template
                    >{{ i18n.ts._theme.explore }}</FormLink
                >
                <FormLink to="/settings/theme/install"
                    ><template #icon
                        ><i
                            class="ph-download-simple ph-bold ph-lg"
                        ></i></template
                    >{{ i18n.ts._theme.install }}</FormLink
                >
                <FormLink to="/theme-editor"
                    ><template #icon
                        ><i
                            class="ph-paint-brush-broad ph-bold ph-lg"
                        ></i></template
                    >{{ i18n.ts._theme.make }}</FormLink
                >
            </div>
        </FormSection>
        <FormSection>
            <FormLink to="/settings/custom-css" class="_formBlock"
                ><template #icon><i class="ph-code ph-bold ph-lg"></i></template
                >{{ i18n.ts.customCss }}</FormLink
            >
        </FormSection>

        <FormButton
            v-if="wallpaper == null"
            class="_formBlock"
            @click="setWallpaper"
            >{{ i18n.ts.setWallpaper }}</FormButton
        >
        <FormButton v-else class="_formBlock" @click="wallpaper = null">{{
            i18n.ts.removeWallpaper
        }}</FormButton>
    </div>
</template>

<script lang="ts" setup>
import { computed, onActivated, ref, watch } from "vue";
import JSON5 from "json5";
import FormSwitch from "@/components/form/switch.vue";
import FormSelect from "@/components/form/select.vue";
import FormSection from "@/components/form/section.vue";
import FormLink from "@/components/form/link.vue";
import FormButton from "@/components/MkButton.vue";
import { getBuiltinThemesRef } from "@/scripts/theme";
import { selectFile } from "@/scripts/select-file";
import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
import { ColdDeviceStorage, defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { instance } from "@/instance";
import { uniqueBy } from "@/scripts/array";
import { fetchThemes, getThemes } from "@/theme-store";
import { definePageMetadata } from "@/scripts/page-metadata";

const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef();

const instanceDarkTheme = computed(() =>
    instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null,
);
const installedDarkThemes = computed(() =>
    installedThemes.value.filter((t) => t.base === "dark" || t.kind === "dark"),
);
const builtinDarkThemes = computed(() =>
    builtinThemes.value.filter((t) => t.base === "dark" || t.kind === "dark"),
);
const instanceLightTheme = computed(() =>
    instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null,
);
const installedLightThemes = computed(() =>
    installedThemes.value.filter(
        (t) => t.base === "light" || t.kind === "light",
    ),
);
const builtinLightThemes = computed(() =>
    builtinThemes.value.filter((t) => t.base === "light" || t.kind === "light"),
);
const themes = computed(() =>
    uniqueBy(
        [
            instanceDarkTheme.value,
            instanceLightTheme.value,
            ...builtinThemes.value,
            ...installedThemes.value,
        ].filter((x) => x != null),
        (theme) => theme.id,
    ),
);

const darkTheme = ColdDeviceStorage.ref("darkTheme");
const darkThemeId = computed({
    get() {
        return darkTheme.value.id;
    },
    set(id) {
        const t = themes.value.find((x) => x.id === id);
        if (t) {
            // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
            ColdDeviceStorage.set("darkTheme", t);
        }
    },
});
const lightTheme = ColdDeviceStorage.ref("lightTheme");
const lightThemeId = computed({
    get() {
        return lightTheme.value.id;
    },
    set(id) {
        const t = themes.value.find((x) => x.id === id);
        if (t) {
            // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
            ColdDeviceStorage.set("lightTheme", t);
        }
    },
});
const darkMode = computed(defaultStore.makeGetterSetter("darkMode"));
const syncDeviceDarkMode = computed(
    ColdDeviceStorage.makeGetterSetter("syncDeviceDarkMode"),
);
const wallpaper = ref(localStorage.getItem("wallpaper"));
const themesCount = installedThemes.value.length;

watch(syncDeviceDarkMode, () => {
    if (syncDeviceDarkMode.value) {
        defaultStore.set("darkMode", isDeviceDarkmode());
    }
});

watch(wallpaper, () => {
    if (wallpaper.value == null) {
        localStorage.removeItem("wallpaper");
    } else {
        localStorage.setItem("wallpaper", wallpaper.value);
    }
    location.reload();
});

onActivated(() => {
    fetchThemes().then(() => {
        installedThemes.value = getThemes();
    });
});

fetchThemes().then(() => {
    installedThemes.value = getThemes();
});

function setWallpaper(event) {
    selectFile(event.currentTarget ?? event.target, null).then((file) => {
        wallpaper.value = file.url;
    });
}

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

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

definePageMetadata({
    title: i18n.ts.theme,
    icon: "ph-palette ph-bold ph-lg",
});
</script>

<style lang="scss" scoped>
.rfqxtzch {
    border-radius: 6px;

    > .toggle {
        position: relative;
        padding: 26px 0;
        text-align: center;

        &.disabled {
            opacity: 0.7;

            &,
            * {
                cursor: not-allowed !important;
            }
        }

        > .toggleWrapper {
            display: inline-block;
            text-align: left;
            padding: 0 100px;
            vertical-align: bottom;

            input {
                position: absolute;
                left: -99em;
            }

            &:focus-within > .toggle {
                outline: auto;
            }
        }

        .toggle {
            cursor: pointer;
            display: inline-block;
            position: relative;
            width: 90px;
            height: 50px;
            background-color: #83d8ff;
            border-radius: 90px - 6;
            transition: background-color 200ms
                cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;

            > .before,
            > .after {
                position: absolute;
                top: 15px;
                transition: color 1s ease;
            }

            > .before {
                left: -70px;
                color: var(--accent);
            }

            > .after {
                right: -68px;
                color: var(--fg);
            }
        }

        .toggle__handler {
            display: inline-block;
            position: relative;
            z-index: 1;
            top: 3px;
            left: 3px;
            width: 50px - 6;
            height: 50px - 6;
            background-color: #ffcf96;
            border-radius: 50px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
            transform: rotate(-45deg);

            .crater {
                position: absolute;
                background-color: #e8cda5;
                opacity: 0;
                transition: opacity 200ms ease-in-out !important;
                border-radius: 100%;
            }

            .crater--1 {
                top: 18px;
                left: 10px;
                width: 4px;
                height: 4px;
            }

            .crater--2 {
                top: 28px;
                left: 22px;
                width: 6px;
                height: 6px;
            }

            .crater--3 {
                top: 10px;
                left: 25px;
                width: 8px;
                height: 8px;
            }
        }

        .star {
            position: absolute;
            background-color: #ffffff;
            transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
            border-radius: 50%;
        }

        .star--1 {
            top: 10px;
            left: 35px;
            z-index: 0;
            width: 30px;
            height: 3px;
        }

        .star--2 {
            top: 18px;
            left: 28px;
            z-index: 1;
            width: 30px;
            height: 3px;
        }

        .star--3 {
            top: 27px;
            left: 40px;
            z-index: 0;
            width: 30px;
            height: 3px;
        }

        .star--4,
        .star--5,
        .star--6 {
            opacity: 0;
            transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
        }

        .star--4 {
            top: 16px;
            left: 11px;
            z-index: 0;
            width: 2px;
            height: 2px;
            transform: translate3d(3px, 0, 0);
        }

        .star--5 {
            top: 32px;
            left: 17px;
            z-index: 0;
            width: 3px;
            height: 3px;
            transform: translate3d(3px, 0, 0);
        }

        .star--6 {
            top: 36px;
            left: 28px;
            z-index: 0;
            width: 2px;
            height: 2px;
            transform: translate3d(3px, 0, 0);
        }

        input:checked {
            + .toggle {
                background-color: #749dd6;

                > .before {
                    color: var(--fg);
                }

                > .after {
                    color: var(--accent);
                }

                .toggle__handler {
                    background-color: #ffe5b5;
                    transform: translate3d(40px, 0, 0) rotate(0);

                    .crater {
                        opacity: 1;
                    }
                }

                .star--1 {
                    width: 2px;
                    height: 2px;
                }

                .star--2 {
                    width: 4px;
                    height: 4px;
                    transform: translate3d(-5px, 0, 0);
                }

                .star--3 {
                    width: 2px;
                    height: 2px;
                    transform: translate3d(-7px, 0, 0);
                }

                .star--4,
                .star--5,
                .star--6 {
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }

                .star--4 {
                    transition: all 300ms 200ms
                        cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
                }

                .star--5 {
                    transition: all 300ms 300ms
                        cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
                }

                .star--6 {
                    transition: all 300ms 400ms
                        cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
                }
            }
        }
    }
    > .sync {
        padding: 14px 16px;
        border-top: solid 0.5px var(--divider);
    }
}

.rsljpzjq {
    > .selects {
        display: flex;
        gap: 1.5em var(--margin);
        flex-wrap: wrap;

        > .select {
            flex: 1;
            min-width: 280px;
        }
    }
}
</style>
