import React, { Component } from "react";
import {  Typography, Icon, Avatar, withStyles  } from '@mui/material/'
import classnames from "classnames";


class CustomImageInput extends Component {
    constructor(props) {
        super(props);
        this.fileUpload = React.createRef();
        this.showFileUpload = this.showFileUpload.bind(this);
        this.handleImageChange = this.handleImageChange.bind(this);
    }

    state = {
        file: undefined,
        imagePreviewUrl: undefined
    };

    showFileUpload() {
        if (this.fileUpload) {
            this.fileUpload.current.click();
        }
    }

    handleImageChange(e) {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[0];
        if (file) {
            reader.onloadend = () => {
                this.setState({
                    file: file,
                    imagePreviewUrl: reader.result
                });
            };
            reader.readAsDataURL(file);
            this.props.setFieldValue(this.props.field.name, file);
        }
    }

    showPreloadImage() {
        const { errorMessage, classes } = this.props;
        const { file, imagePreviewUrl } = this.state;

        let comp = null;

        if (errorMessage) {
            comp = <Icon style={{ fontSize: 36 }}>error_outline</Icon>;
        } else if (file) {
            comp = (
                <img className={classes.avatarThumb} src={imagePreviewUrl} alt="..." />
            );
        } else {
            comp = <Icon style={{ fontSize: 36 }}>folder</Icon>;
        }
        return comp;
    }

    componentDidMount() {
        console.log(this.fileUpload.current);
    }

    render() {
        const { errorMessage, title, classes } = this.props;
        const { name, onBlur } = this.props.field;

        const avatarStyle = classnames(
            classes.bigAvatar,
            this.state.file ? [classes.whiteBack] : [classes.primaryBack],
            { [classes.errorBack]: errorMessage }
        );

        return (
            <div className={classes.container}>
                <input
                    className={classes.hidden}
                    id={name}
                    name={name}
                    type="file"
                    onChange={this.handleImageChange}
                    ref={this.fileUpload}
                    onBlur={onBlur}
                    //className="form-control"
                />
                <Typography className={classes.title} variant="h5">
                    {title}
                </Typography>
                <Avatar className={avatarStyle} onClick={this.showFileUpload}>
                    {this.showPreloadImage()}
                </Avatar>

                {errorMessage ? (
                    <Typography variant="caption" color="error">
                        {errorMessage}
                    </Typography>
                ) : null}
            </div>
        );
    }
}

const customImageInputStyle = theme => ({
    hidden: { display: "none" },

    container: {
        margin: "auto"
    },
    title: {
        margin: "auto",
        display: "flex",
        justifyContent: "center",
        //fontFamily: 'Roboto Slab',
        //fontWeight:'bold',
        padding: theme.spacing.unit
    },
    bigAvatar: {
        margin: "auto",
        width: 80,
        height: 80,
        borderColor: theme.palette.primary.main,
        borderStyle: "solid",
        borderSize: "1px"
    },
    avatarThumb: {
        maxWidth: 80,
        maxHeight: 80
    },
    primaryBack: {
        background: theme.palette.primary.main
    },
    whiteBack: {
        background: "white"
    },

    errorBack: { background: theme.palette.error.main }
});

export default withStyles(customImageInputStyle)(CustomImageInput);
