import React from 'react';

import { TableRow, TableCell, Dialog, DialogTitle, DialogActions, Button, DialogContent } from '@material-ui/core';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import styleConstants from '../../styleConstants';
import appConstants from '../../appConstants';

const actionIconStyle = {
    margin: '0 4px 0 4px',
    cursor: 'pointer',
    '&:hover': {
        filter: 'brightness(80%)',
        transform: 'scale(1.1)'
    }
};

const EntityTableRow = ({ d, history, entityId, data, entityData, dataChanged, isEven }) => {
    const [hoveredRow, setHoveredRow] = React.useState(false);
    const [dialogOpen, setDialogOpen] = React.useState(false);
    const [loadState, setLoadState] = React.useState('ready');

    React.useEffect(() => {
        if (!dialogOpen) {
            setHoveredRow(false);
            setLoadState('ready');
        }
    }, [dialogOpen]);

    const deleteEntity = async () => {
        try {
            setLoadState('loading');
            await appConstants.connector.deleteItem(entityId, d.id);
            dataChanged();
            setLoadState('ready');
        } catch (e) {
            console.log(e);
            setLoadState('error');
        }
    };

    return (
        <TableRow
            onMouseEnter={() => setHoveredRow(true)}
            onMouseLeave={() => setHoveredRow(false)}
            css={{
                backgroundColor: isEven ? '#f5faf9' : 'transparent',
                '&:hover': {
                    backgroundColor: styleConstants.mainColorPalette[50]
                }
            }}>
            <TableCell css={{ width: 80, padding: 0, borderBottom: 'none' }}>
                {hoveredRow && (
                    <div
                        css={{
                            width: '100%',
                            height: '100%',
                            ...styleConstants.centered
                        }}>
                        <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} aria-labelledby="simple-dialog-title">
                            <DialogTitle id="simple-dialog-title">Are you sure you want to delete this entity?</DialogTitle>
                            {loadState === 'error' && (
                                <DialogContent css={{ color: styleConstants.errorColor }}>Error occurend during the request</DialogContent>
                            )}
                            <DialogActions>
                                <Button disabled={loadState === 'loading'} onClick={() => setDialogOpen(false)} color="primary">
                                    Cancel
                                </Button>
                                <Button disabled={loadState === 'loading'} onClick={deleteEntity} color="primary" variant={'contained'}>
                                    Yes
                                </Button>
                            </DialogActions>
                        </Dialog>
                        <DeleteIcon
                            onClick={() => {
                                setDialogOpen(true);
                            }}
                            color={'primary'}
                            css={actionIconStyle}
                        />
                        <EditIcon
                            onClick={() =>
                                history.push(`/${entityId}/${d.id}`, {
                                    entities: data
                                })
                            }
                            color={'primary'}
                            css={actionIconStyle}
                        />
                    </div>
                )}
            </TableCell>
            {Object.keys(entityData.schema).map((p) => (
                <TableCell css={{ borderBottom: 'none' }} key={p}>
                    {d[p]}
                </TableCell>
            ))}
        </TableRow>
    );
};

export default EntityTableRow;