/*
 * 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 Label from '@mui/icons-material/Label';
import MoreHoriz from '@mui/icons-material/MoreHoriz';
import Refresh from '@mui/icons-material/Refresh';
import {
    IconButton,
    ListItemIcon,
    ListItemText,
    Menu,
    MenuItem,
    Tooltip,
    useMediaQuery,
    useTheme,
} from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { TManga } from '@/typings.ts';
import { useCategorySelect } from '@/components/navbar/action/useCategorySelect.tsx';

interface IProps {
    manga: TManga;
    onRefresh: () => any;
    refreshing: boolean;
}

export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
    const { t } = useTranslation();

    const theme = useTheme();
    const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));

    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClose = () => {
        setAnchorEl(null);
    };

    const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
        mangaId: manga.id,
    });

    return (
        <>
            {isLargeScreen && (
                <>
                    <Tooltip title={t('manga.label.reload_from_source')}>
                        <IconButton
                            onClick={() => {
                                onRefresh();
                            }}
                            disabled={refreshing}
                        >
                            <Refresh />
                        </IconButton>
                    </Tooltip>
                    {manga.inLibrary && (
                        <>
                            <Tooltip title={t('global.button.migrate')}>
                                <Link
                                    to={`/migrate/source/${manga.source?.id}/manga/${manga.id}/search?query=${manga.title}`}
                                    state={{ mangaTitle: manga.title }}
                                    style={{ textDecoration: 'none', color: 'inherit' }}
                                >
                                    <IconButton>
                                        <SyncAltIcon />
                                    </IconButton>
                                </Link>
                            </Tooltip>
                            <Tooltip title={t('manga.label.edit_categories')}>
                                <IconButton
                                    onClick={() => {
                                        openCategorySelect(true);
                                    }}
                                >
                                    <Label />
                                </IconButton>
                            </Tooltip>
                        </>
                    )}
                </>
            )}
            {!isLargeScreen && (
                <>
                    <IconButton
                        id="chaptersMenuButton"
                        aria-controls={open ? 'chaptersMenu' : undefined}
                        aria-haspopup="true"
                        aria-expanded={open ? 'true' : undefined}
                        onClick={(e) => setAnchorEl(e.currentTarget)}
                    >
                        <MoreHoriz />
                    </IconButton>
                    <Menu
                        id="chaptersMenu"
                        anchorEl={anchorEl}
                        open={open}
                        onClose={handleClose}
                        MenuListProps={{
                            'aria-labelledby': 'chaptersMenuButton',
                        }}
                    >
                        <MenuItem
                            onClick={() => {
                                onRefresh();
                                handleClose();
                            }}
                            disabled={refreshing}
                        >
                            <ListItemIcon>
                                <Refresh fontSize="small" />
                            </ListItemIcon>
                            <ListItemText>{t('manga.label.reload_from_source')}</ListItemText>
                        </MenuItem>
                        {manga.inLibrary && [
                            <MenuItem
                                key="migrate"
                                component={Link}
                                to={`/migrate/source/${manga.source?.id}/manga/${manga.id}/search?query=${manga.title}`}
                                state={{ mangaTitle: manga.title }}
                                style={{ textDecoration: 'none', color: 'inherit' }}
                            >
                                <ListItemIcon>
                                    <SyncAltIcon fontSize="small" />
                                </ListItemIcon>
                                <ListItemText>{t('migrate.title')}</ListItemText>
                            </MenuItem>,
                            <MenuItem
                                key="categories"
                                onClick={() => {
                                    openCategorySelect(true);
                                    handleClose();
                                }}
                            >
                                <ListItemIcon>
                                    <Label fontSize="small" />
                                </ListItemIcon>
                                <ListItemText>{t('manga.label.edit_categories')}</ListItemText>
                            </MenuItem>,
                        ]}
                    </Menu>
                </>
            )}

            {CategorySelectComponent}
        </>
    );
};