suwayomi-material-you-webui/src/modules/library/components/LibraryOptionsPanel.tsx

/*
 * Copyright (C) Contributors to the Suwayomi project
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
import { RadioInput } from '@/modules/core/components/inputs/RadioInput.tsx';
import { SortRadioInput } from '@/modules/core/components/inputs/SortRadioInput.tsx';
import { ThreeStateCheckboxInput } from '@/modules/core/components/inputs/ThreeStateCheckboxInput.tsx';
import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
import { OptionsTabs } from '@/modules/core/components/OptionsTabs.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { Trackers } from '@/modules/tracker/services/Trackers.ts';
import { GetTrackersSettingsQuery, MangaStatus } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
import { statusToTranslationKey } from '@/modules/manga/services/Mangas.ts';
import { createUpdateCategoryMetadata, getCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import {
    createUpdateMetadataServerSettings,
    useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { TranslationKey } from '@/Base.types.ts';
import { LibrarySortMode } from '@/modules/library/Library.types.ts';
import { CategoryMetadataInfo } from '@/modules/category/Category.types.ts';

const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
    filter: 'global.label.filter',
    sort: 'global.label.sort',
    display: 'global.label.display',
};

const SORT_OPTIONS: [LibrarySortMode, TranslationKey][] = [
    ['unreadChapters', 'library.option.sort.label.by_unread_chapters'],
    ['totalChapters', 'library.option.sort.label.by_total_chapters'],
    ['alphabetically', 'library.option.sort.label.alphabetically'],
    ['dateAdded', 'library.option.sort.label.by_date_added'],
    ['lastRead', 'library.option.sort.label.by_last_read'],
    ['latestFetchedChapter', 'library.option.sort.label.by_latest_fetched_chapter'],
    ['latestUploadedChapter', 'library.option.sort.label.by_latest_uploaded_chapter'],
];

export const LibraryOptionsPanel = ({
    category,
    open,
    onClose,
}: {
    category: CategoryMetadataInfo;
    open: boolean;
    onClose: () => void;
}) => {
    const { t } = useTranslation();

    const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
    const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);

    const categoryLibraryOptions = useMemo(() => getCategoryMetadata(category), [category]);
    const updateCategoryLibraryOptions = createUpdateCategoryMetadata(category, () =>
        makeToast(t('global.error.label.failed_to_save_changes', 'error')),
    );

    const {
        settings: { showTabSize },
    } = useMetadataServerSettings();
    const setSettingValue = createUpdateMetadataServerSettings<'showTabSize'>(() =>
        makeToast(t('search.error.label.failed_to_save_settings'), 'warning'),
    );

    return (
        <OptionsTabs<'filter' | 'sort' | 'display'>
            open={open}
            onClose={onClose}
            tabs={['filter', 'sort', 'display']}
            tabTitle={(key) => t(TITLES[key])}
            tabContent={(key) => {
                if (key === 'filter') {
                    return (
                        <>
                            <ThreeStateCheckboxInput
                                label={t('global.filter.label.unread')}
                                checked={categoryLibraryOptions.hasUnreadChapters}
                                onChange={(c) => updateCategoryLibraryOptions('hasUnreadChapters', c)}
                            />
                            <ThreeStateCheckboxInput
                                label={t('global.filter.label.downloaded')}
                                checked={categoryLibraryOptions.hasDownloadedChapters}
                                onChange={(c) => updateCategoryLibraryOptions('hasDownloadedChapters', c)}
                            />
                            <ThreeStateCheckboxInput
                                label={t('global.filter.label.bookmarked')}
                                checked={categoryLibraryOptions.hasBookmarkedChapters}
                                onChange={(c) => updateCategoryLibraryOptions('hasBookmarkedChapters', c)}
                            />
                            <ThreeStateCheckboxInput
                                label={t('global.filter.label.duplicate_chapters')}
                                checked={categoryLibraryOptions.hasDuplicateChapters}
                                onChange={(c) => updateCategoryLibraryOptions('hasDuplicateChapters', c)}
                            />
                            <FormLabel sx={{ mt: 2 }}>{t('manga.label.status')}</FormLabel>
                            {Object.values(MangaStatus).map((status) => (
                                <ThreeStateCheckboxInput
                                    key={status}
                                    label={t(statusToTranslationKey[status])}
                                    checked={categoryLibraryOptions.hasStatus[status]}
                                    onChange={(checked) =>
                                        updateCategoryLibraryOptions('hasStatus', {
                                            ...categoryLibraryOptions.hasStatus,
                                            [status]: checked,
                                        })
                                    }
                                />
                            ))}
                            <FormLabel sx={{ mt: 2 }}>{t('global.filter.label.tracked')}</FormLabel>
                            {loggedInTrackers.map((tracker) => (
                                <ThreeStateCheckboxInput
                                    key={tracker.id}
                                    label={tracker.name}
                                    checked={categoryLibraryOptions.hasTrackerBinding[tracker.id]}
                                    onChange={(checked) =>
                                        updateCategoryLibraryOptions('hasTrackerBinding', {
                                            ...categoryLibraryOptions.hasTrackerBinding,
                                            [tracker.id]: checked,
                                        })
                                    }
                                />
                            ))}
                        </>
                    );
                }
                if (key === 'sort') {
                    return SORT_OPTIONS.map(([mode, label]) => (
                        <SortRadioInput
                            key={mode}
                            label={t(label)}
                            checked={categoryLibraryOptions.sortBy === mode}
                            sortDescending={categoryLibraryOptions.sortDesc}
                            onClick={() =>
                                mode !== categoryLibraryOptions.sortBy
                                    ? updateCategoryLibraryOptions('sortBy', mode)
                                    : updateCategoryLibraryOptions('sortDesc', !categoryLibraryOptions.sortDesc)
                            }
                        />
                    ));
                }
                if (key === 'display') {
                    const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge } =
                        categoryLibraryOptions;
                    return (
                        <>
                            <FormLabel>{t('global.grid_layout.title')}</FormLabel>
                            <RadioGroup
                                onChange={(e) => updateCategoryLibraryOptions('gridLayout', Number(e.target.value))}
                                value={gridLayout}
                            >
                                <RadioInput
                                    label={t('global.grid_layout.label.compact_grid')}
                                    value={GridLayout.Compact}
                                    checked={gridLayout == null || gridLayout === GridLayout.Compact}
                                />
                                <RadioInput
                                    label={t('global.grid_layout.label.comfortable_grid')}
                                    value={GridLayout.Comfortable}
                                    checked={gridLayout === GridLayout.Comfortable}
                                />
                                <RadioInput
                                    label={t('global.grid_layout.label.list')}
                                    value={GridLayout.List}
                                    checked={gridLayout === GridLayout.List}
                                />
                            </RadioGroup>

                            <FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
                            <CheckboxInput
                                label={t('library.option.display.badge.label.unread_badges')}
                                checked={showUnreadBadge}
                                onChange={() => updateCategoryLibraryOptions('showUnreadBadge', !showUnreadBadge)}
                            />
                            <CheckboxInput
                                label={t('library.option.display.badge.label.download_badges')}
                                checked={showDownloadBadge}
                                onChange={() => updateCategoryLibraryOptions('showDownloadBadge', !showDownloadBadge)}
                            />

                            <FormLabel sx={{ mt: 2 }}>{t('library.option.display.tab.title')}</FormLabel>
                            <CheckboxInput
                                label={t('library.option.display.tab.label.show_number_of_items')}
                                checked={showTabSize}
                                onChange={() => setSettingValue('showTabSize', !showTabSize)}
                            />

                            <FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
                            <CheckboxInput
                                label={t('library.option.display.other.label.show_continue_reading_button')}
                                checked={showContinueReadingButton}
                                onChange={() =>
                                    updateCategoryLibraryOptions(
                                        'showContinueReadingButton',
                                        !showContinueReadingButton,
                                    )
                                }
                            />
                        </>
                    );
                }
                return null;
            }}
        />
    );
};