feishin/src/renderer/features/settings/components/settings-header.tsx

import { closeAllModals, openModal } from '@mantine/modals';
import { useTranslation } from 'react-i18next';

import { UpdateAvailableButton } from '/@/renderer/features/settings/components/update-available-button';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { SearchInput } from '/@/renderer/features/shared/components/search-input';
import { useSettingsStoreActions } from '/@/renderer/store/settings.store';
import { Button } from '/@/shared/components/button/button';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { ConfirmModal } from '/@/shared/components/modal/modal';
import { Text } from '/@/shared/components/text/text';

export type SettingsHeaderProps = {
    setSearch: (search: string) => void;
    showUpdateAvailable?: boolean;
};

export const SettingsHeader = ({ setSearch, showUpdateAvailable }: SettingsHeaderProps) => {
    const { t } = useTranslation();
    const { reset } = useSettingsStoreActions();
    const search = useSettingSearchContext();

    const handleResetToDefault = () => {
        reset();
        closeAllModals();
    };

    const openResetConfirmModal = () => {
        openModal({
            children: (
                <ConfirmModal onConfirm={handleResetToDefault}>
                    <Text>{t('common.areYouSure')}</Text>
                </ConfirmModal>
            ),
            title: t('common.resetToDefault'),
        });
    };

    return (
        <Flex>
            <LibraryHeaderBar>
                <Flex align="center" justify="space-between" w="100%">
                    <Group wrap="nowrap">
                        <Icon icon="settings" size="5xl" />
                        <LibraryHeaderBar.Title>
                            {t('common.setting', { count: 2 })}
                        </LibraryHeaderBar.Title>
                    </Group>
                    <Group>
                        {showUpdateAvailable && <UpdateAvailableButton />}
                        <SearchInput
                            defaultValue={search}
                            onChange={(event) => setSearch(event.target.value.toLocaleLowerCase())}
                        />
                        <Button onClick={openResetConfirmModal} variant="default">
                            {t('common.resetToDefault')}
                        </Button>
                    </Group>
                </Flex>
            </LibraryHeaderBar>
        </Flex>
    );
};