import * as React from 'react';
import Alert from '@mui/material/Alert';
import CrudDataGrid from './CrudDataGrid';
import CrudTableToolbar from './CrudTableToolbar';
import { alternatingRowClassName, createEmptyRowSelectionModel, getSelectedNumericRowId, isDeleteDisabled } from './tableViewUtils';
import type { GridRowSelectionModel } from '@mui/x-data-grid';
import {getLanguageById} from '../api/language/languages.api';
import type { Translation } from '../data/translation';
import TranslationCreateDialog from './TranslationCreateDialog';
import { deleteTranslation, getTranslationsByLanguageId, updateTranslation } from '../api/language/translations.api';
import type { Language } from '../data/language';

const TranslationsTableView = ({ selectedRow }: { selectedRow: number }) => {
    const [translations, setTranslations] = React.useState<Translation[]>([]);
    const [language, setLanguage] = React.useState<Language | null>(null);
    const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>(createEmptyRowSelectionModel);
    const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
    const [errorMessage, setErrorMessage] = React.useState('');

    const loadTranslations = () => {
        if (selectedRow <= 0) {
            setTranslations([]);
            setRowSelectionModel(createEmptyRowSelectionModel());
            return;
        }

        getTranslationsByLanguageId(selectedRow)
            .then(setTranslations)
            .catch(() => setErrorMessage('Loading translations failed.'));
    };

    React.useEffect(() => {
        loadTranslations();
    }, [selectedRow]);

    React.useEffect(() => {
        if (selectedRow <= 0) {
            setLanguage(null);
            return;
        }

        getLanguageById(selectedRow).then(setLanguage);
    }, [selectedRow]);

    const handleTranslationCreated = () => {
        setIsCreateDialogOpen(false);
        setErrorMessage('');
        loadTranslations();
    };

    const handleDeleteTranslation = async () => {
        const selectedTranslationId = getSelectedNumericRowId(rowSelectionModel);
        if (selectedTranslationId == null) {
            setErrorMessage('Select a translation before deleting it.');
            return;
        }

        try {
            await deleteTranslation(selectedTranslationId);
            setRowSelectionModel(createEmptyRowSelectionModel());
            setErrorMessage('');
            loadTranslations();
        } catch {
            setErrorMessage('Deleting the translation failed.');
        }
    };


    return (
        <div>
            {errorMessage !== '' && <Alert severity="error" sx={{ mb: 2 }}>{errorMessage}</Alert>}
            <CrudDataGrid
                    paperSx={{ height: 600, width: '50vw' }}
                    initialState={{
                            sorting: {
                            sortModel: [{ field: 'original', sort: 'asc' }],
                        },
                    }}
                    rows={translations}
                    columns={[
                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
                        { field: 'original', headerName: 'Original', width: 200 , editable: true},
                        { field: 'translated', headerName: 'Translated', width: 200 , editable: true},
                    ]}
                    slots={{
                        toolbar: () => (
                            <CrudTableToolbar
                                title={`Translations for ${language?.language}.`}
                                disableAdd={selectedRow <= 0}
                                disableDelete={isDeleteDisabled(rowSelectionModel)}
                                onDelete={handleDeleteTranslation}
                                onAdd={() => setIsCreateDialogOpen(true)}
                            />
                        ),
                    }}
                    processRowUpdate={async (updatedRow) => {
                        await updateTranslation({
                            id: updatedRow.id, 
                            language_id: updatedRow.language_id, 
                            translated: updatedRow.translated, 
                            original: updatedRow.original,
                        });
                        setErrorMessage('');
                        return updatedRow;
                    }}
                    onProcessRowUpdateError={() => setErrorMessage('Saving the translation failed.')}
                    getRowClassName={alternatingRowClassName}
                    rowSelectionModel={rowSelectionModel}
                    onRowSelectionModelChange={(newRowSelectionModel) => setRowSelectionModel(newRowSelectionModel)}
                />
            <TranslationCreateDialog
                open={isCreateDialogOpen}
                languageId={selectedRow}
                onClose={() => setIsCreateDialogOpen(false)}
                onCreated={handleTranslationCreated}
            />
        </div>
    );
};

export default TranslationsTableView;