import IconButton from '@material-ui/core/IconButton';
import {withStyles, WithStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Delete from '@material-ui/icons/Delete';
import React from 'react';
import TimeAgo from 'react-timeago';
import Container from '../common/Container';

const styles = () => ({
    header: {
        display: 'flex',
    },
    headerTitle: {
        flex: 1,
    },
    trash: {
        marginTop: -15,
        marginRight: -15,
    },
    wrapperPadding: {
        padding: 12,
    },
    messageContentWrapper: {
        width: '100%',
    },
    image: {
        marginRight: 15,
    },
    imageWrapper: {
        display: 'flex',
    },
});

type Style = WithStyles<
    | 'header'
    | 'headerTitle'
    | 'trash'
    | 'wrapperPadding'
    | 'messageContentWrapper'
    | 'image'
    | 'imageWrapper'
>;

interface IProps {
    title: string;
    image?: string;
    date: string;
    content: string;
    fDelete: VoidFunction;
    height: (height: number) => void;
}

class Message extends React.PureComponent<IProps & Style> {
    private node: HTMLDivElement | null;

    public componentDidMount = () =>
        this.props.height(this.node ? this.node.getBoundingClientRect().height : 0);

    public render(): React.ReactNode {
        const {fDelete, classes, title, date, content, image} = this.props;
        return (
            <div className={`${classes.wrapperPadding} message`} ref={(ref) => (this.node = ref)}>
                <Container style={{display: 'flex'}}>
                    <div className={classes.imageWrapper}>
                        <img
                            src={image}
                            alt="app logo"
                            width="70"
                            height="70"
                            className={classes.image}
                        />
                    </div>
                    <div className={classes.messageContentWrapper}>
                        <div className={classes.header}>
                            <Typography
                                className={`${classes.headerTitle} title`}
                                variant="headline">
                                {title}
                            </Typography>
                            <Typography variant="body1" className="date">
                                <TimeAgo date={date} />
                            </Typography>
                            <IconButton onClick={fDelete} className={`${classes.trash} delete`}>
                                <Delete />
                            </IconButton>
                        </div>
                        <Typography component="p" className="content">
                            {content}
                        </Typography>
                    </div>
                </Container>
            </div>
        );
    }
}

export default withStyles(styles)<IProps>(Message);