import React, { Fragment } from "react";
import { Modal } from 'react-bootstrap';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faKey } from '@fortawesome/free-solid-svg-icons';


import Cropper from "react-easy-crop";
import Slider from "@material-ui/core/Slider";
import Button from "@material-ui/core/Button";

import { generateDownload } from "./cropImage";



function modalImagen(props) {
    const inputRef = React.useRef();

    const triggerFileSelectPopup = () => inputRef.current.click();

    const [image, setImage] = React.useState(null);
    const [croppedArea, setCroppedArea] = React.useState(null);
    const [crop, setCrop] = React.useState({ x: 0, y: 0 });
    const [zoom, setZoom] = React.useState(1);

    const onCropComplete = (croppedAreaPercentage, croppedAreaPixels) => {
        setCroppedArea(croppedAreaPixels);
    };

    const onSelectFile = (event) => {
        if (event.target.files && event.target.files.length > 0) {
            const reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]);
            reader.addEventListener("load", () => {
                setImage(reader.result);
            });
        }
    };

    const onDownload = async () => {
        //generateDownload(image, croppedArea);

        const _canvas = await generateDownload(image, croppedArea);
        await props.nuevaImagen(_canvas);
    };

    const onHideModal = () => {
        props.onHide();
    }

    return (


        <Fragment>
            <Modal show={props.show} animation={false} onHide={onHideModal}>
                <Modal.Header >
                    <Modal.Title>{props.modalTitle ? props.modalTitle : "Imagen"}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div className='container'>
                        <div className='container-cropper'>
                            {image ? (
                                <>
                                    <div className='cropper'>
                                        <Cropper
                                            image={image}
                                            crop={crop}
                                            zoom={zoom}
                                            aspect={1}
                                            onCropChange={setCrop}
                                            onZoomChange={setZoom}
                                            onCropComplete={onCropComplete}
                                        />
                                    </div>

                                    <div className='slider'>
                                        <Slider
                                            min={1}
                                            max={3}
                                            step={0.1}
                                            value={zoom}
                                            onChange={(e, zoom) => setZoom(zoom)}
                                        />
                                    </div>
                                </>
                            ) : null}
                        </div>
                    </div>
                </Modal.Body >
                <Modal.Footer>
                    <div className='container-buttons'>
                        <input
                            type='file'
                            accept='image/*'
                            ref={inputRef}
                            onChange={onSelectFile}
                            style={{ display: "none" }}
                        />
                        <div className="tooltip2">
                            <span className="tooltiptext2">{props.seleccionarButtonLabel ? props.seleccionarButtonLabel : "Seleccionar imagen"}</span>
                            <Button
                            className="btn btn-secondary" 
                                onClick={triggerFileSelectPopup}
                                style={{ marginRight: "10px" }}
                            >
                                Seleccionar
                            </Button>
                        </div>
                        <div className="tooltip2">
                            <span className="tooltiptext2">{props.cambiarButtonLabel ? props.cambiarButtonLabel : "Cambiar imagen"}</span>
                            <Button className="btn btn-secondary" onClick={onDownload}>
                                Cambiar
                            </Button>
                        </div>
                        <div className="tooltip2">
                            <span className="tooltiptext2">{props.cancelButtonLabel ? props.cancelButtonLabel : "Cerrar"}</span>
                            <Button className="btn btn-secondary" onClick={onHideModal}>{props.cancelButtonLabel ? props.cancelButtonLabel : "Cerrar"}</Button>
                        </div>
                    </div>
                </Modal.Footer>
            </Modal >
        </Fragment>


    );
}
export default (modalImagen)