import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDownload, faUpload, faSearch, faHeartbeat } from '@fortawesome/free-solid-svg-icons';
import { Button } from '@/components/elements/button';
import ImportDatabaseModal from './ImportDatabaseModal';
import DatabaseContentModal from './DatabaseContentModal';
import MongoContentModal from './MongoContentModal';
import ExportDatabaseModal from './ExportDatabaseModal';
import DatabaseHealthModal from './modal_components/DatabaseHealthModal';
import { ServerDatabase } from './api/getServerDatabases';
import Can from '@/components/elements/Can';
import tw from 'twin.macro';

interface DatabaseActionsProps {
    database: ServerDatabase;
    onOpenContents?: (database: ServerDatabase) => void;
}

const DatabaseActions: React.FC<DatabaseActionsProps> = ({ database, onOpenContents }) => {
    const [uploadVisible, setUploadVisible] = useState(false);
    const [contentsVisible, setContentsVisible] = useState(false);
    const [exportVisible, setExportVisible] = useState(false);
    const [healthVisible, setHealthVisible] = useState(false);

    const engine = (database.engine || 'mysql').toLowerCase();
    const isMongo = engine === 'mongodb' || engine === 'mongo';
    const isRedis = engine === 'redis';
    const actions = [
        {
            key: 'contents',
            icon: faSearch,
            label: 'View Database Contents',
            permission: 'database.read',
            onClick: () => (onOpenContents ? onOpenContents(database) : setContentsVisible(true)),
            hidden: isRedis,
        },
        {
            key: 'export',
            icon: faDownload,
            label: 'Export Database',
            permission: 'database.read',
            onClick: () => setExportVisible(true),
            hidden: isRedis,
        },
        {
            key: 'import',
            icon: faUpload,
            label: 'Import Database',
            permission: 'database.update',
            onClick: () => setUploadVisible(true),
            hidden: isRedis,
        },
        {
            key: 'health',
            icon: faHeartbeat,
            label: 'View Database Health',
            permission: 'database.read',
            onClick: () => setHealthVisible(true),
            hidden: isMongo || isRedis,
        },
    ];

    return (
        <>
            <div css={tw`flex items-center gap-2`}>
                {actions.filter((action) => !action.hidden).map(({ key, icon, label, permission, onClick }) => (
                    <Can key={key} action={permission}>
                        <Button.Text
                            type={'button'}
                            size={Button.Sizes.Small}
                            shape={Button.Shapes.IconSquare}
                            css={tw`flex-shrink-0 bg-neutral-600 hover:bg-neutral-500`}
                            onClick={onClick}
                            title={label}
                            aria-label={label}
                        >
                            <FontAwesomeIcon icon={icon} fixedWidth />
                        </Button.Text>
                    </Can>
                ))}
            </div>

            <ImportDatabaseModal
                databaseId={database.id}
                engine={database.engine}
                visible={uploadVisible}
                onDismissed={() => setUploadVisible(false)}
            />

            {!onOpenContents &&
                (isMongo ? (
                    <MongoContentModal
                        databaseId={database.id}
                        databaseName={database.name}
                        visible={contentsVisible}
                        onDismissed={() => setContentsVisible(false)}
                    />
                ) : (
                    <DatabaseContentModal
                        databaseId={database.id}
                        databaseName={database.name}
                        engine={database.engine}
                        visible={contentsVisible}
                        onDismissed={() => setContentsVisible(false)}
                    />
                ))}

            <ExportDatabaseModal
                databaseId={database.id}
                databaseName={database.name}
                engine={database.engine}
                visible={exportVisible}
                onDismissed={() => setExportVisible(false)}
            />

            <DatabaseHealthModal
                databaseId={database.id}
                databaseName={database.name}
                visible={healthVisible}
                onDismissed={() => setHealthVisible(false)}
            />
        </>
    );
};

export default DatabaseActions;