import { IconButton, Tooltip, useTheme } from '@mui/material';
import { red } from '@mui/material/colors';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import React from 'react';
import { useDispatch } from 'react-redux';
import { ContractModel } from '../../Data/ContractManager';
import { TransactionDetail } from './Detail/TransactionDetail';
import { UTXODetail } from './Detail/UTXODetail';
import { deselect_entity } from './EntitySlice';
import './EntityViewer.css';
import Color from 'color';

interface CurrentylViewedEntityProps {
    current_contract: ContractModel;
}

export function CurrentlyViewedEntity(props: CurrentylViewedEntityProps) {
    const theme = useTheme();
    const dispatch = useDispatch();
    const [width, setWidth] = React.useState('20em');
    const onMouseUp = (e: MouseEvent) => {
        e.preventDefault();
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    };
    const onMouseMove = (e: MouseEvent) => {
        e.preventDefault();
        const width = (window.innerWidth - e.clientX).toString() + 'px';
        setWidth(width);
    };
    const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
        e.preventDefault();
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    };

    return (
        <div
            className="EntityViewerFrame"
            style={{
                backgroundColor: Color(theme.palette.background.default)
                    .fade(0.2)
                    .toString(),
            }}
        >
            <div className="EntityViewerResize" onMouseDown={onMouseDown}></div>
            <div>
                <Tooltip title="Close Entity Viewer">
                    <IconButton
                        aria-label="close-entity-viewer"
                        onClick={() => dispatch(deselect_entity())}
                    >
                        <CancelOutlinedIcon style={{ color: red[500] }} />
                    </IconButton>
                </Tooltip>
                <div
                    className="EntityViewer"
                    style={{
                        width: width,
                    }}
                >
                    <TransactionDetail
                        current_contract={props.current_contract}
                        find_tx_model={(a: Buffer, b: number) =>
                            props.current_contract.lookup_utxo_model(a, b)
                        }
                    />
                    <UTXODetail contract={props.current_contract} />
                </div>
            </div>
        </div>
    );
}