suwayomi-material-you-webui/src/features/migration/components/MIgrationEntryGroup.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 type { MigrationEntryStatus, TMigrationEntry } from '@/features/migration/Migration.types.ts';
import type { ButtonProps } from '@mui/material/Button';
import Button from '@mui/material/Button';
import Collapse from '@mui/material/Collapse';
import Stack from '@mui/material/Stack';
import { memo } from 'react';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { MigrationEntry } from '@/features/migration/components/migration-entry/MigrationEntry.tsx';
import { MigrationManager } from '@/features/migration/MigrationManager.ts';

export const MigrationEntryGroup = memo(
    ({
        status,
        title,
        entries,
        color,
        isMigrating = false,
    }: {
        status: MigrationEntryStatus;
        title: string;
        entries: TMigrationEntry[];
        color: ButtonProps['color'];
        isMigrating?: boolean;
    }) => {
        const isExpanded = MigrationManager.useGroupExpandState(status);

        if (!entries.length) {
            return null;
        }

        return (
            <Stack sx={{ width: '100%', gap: 2 }}>
                <Button
                    onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
                    color={color}
                    variant="outlined"
                    startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                    size="large"
                    sx={{
                        py: 2,
                        justifyContent: 'center',
                        '& .MuiButton-startIcon': {
                            position: 'absolute',
                            left: (theme) => theme.spacing(4),
                            margin: 0,
                        },
                    }}
                >
                    {title}
                </Button>
                <Collapse in={isExpanded} unmountOnExit>
                    <Stack sx={{ gap: 1 }}>
                        {entries.map((entry) => (
                            <MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
                        ))}
                    </Stack>
                </Collapse>
            </Stack>
        );
    },
);