import React from 'react';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
import CloseIcon from '@material-ui/icons/Close';

const StyledModal = styled(Modal)`
    margin : 0 !important;
    margin-left : 0 !important;
    display : flex;
    align-items: center;
    justify-content : center;
    text-align : center;
    padding : 10px !important;
    border-radius : 4px;
    max-width : none;
    max-height : none;
    min-width: 150px;
    min-height: 150px !important;
`

const HeaderDiv = styled.div`
    width : 100%;
    max-width : 100%;
    display : flex;
    align-items : center;
    align-content : center;
`
const ContentContainer = styled.div`
    box-sizing : border-box;
    background-color: ${props => props.contrast === "" ? "white" : "black"};
    border: ${props => props.contrast === "" ? "" : "1px solid white"};
    color: ${props => props.contrast === "" ? "#666" : "white"};
    max-width : none;
    min-wdith : 240px;
    align : center;
    border-radius : 4px;
    font-family : 'Roboto', sans serif;
    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
    color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
    text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
    outline : none !important;
    text-align : center !important;
    margin : 0 8px !important;
    font-weight : 600 !important;
`

const ButtonConfirmar = styled(Button)`
    background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
    color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
    text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
    border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
    border-radius : 3px !important;
    margin : 0 8px !important;
    font-weight : 600 !important;
`

const StyledCloseModalButton = styled(Button)`
    display : inline-block;
    position : relative;
    margin-right : -8px !important;
    background : transparent !important;
    min-width: 0 !important;
    width : 40px;
`

function CloseModalButton(props) {
    return (
        <StyledCloseModalButton onClick={props.handleClose}>
            <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
        </StyledCloseModalButton>
    )
}

export default function ModalExcluir (props) {
    const text = {
        header : "Tem certeza que deseja excluir este comentário?",
        explanation : "A exclusão de um comentário é permanente. Não é possível desfazer."
    }

    return (
        <StyledModal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={props.open}

            centered="true"
            onClose={props.handleClose}
            closeAfterTransition
            BackdropComponent={Backdrop}
            BackdropProps={{
                timeout: 500,
            }}
        >
            <Fade in={props.open}>
                <ContentContainer contrast={props.contrast}>
                    <HeaderDiv>
                        <h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
                            {text.header}
                        </h3>
                        <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
                    </HeaderDiv>
                    <div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
                        <div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
                            <span style={{fontSize : "14px"}}>{text.explanation}</span>
                        </div>
                        <div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
                            <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
                            <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
                        </div>
                    </div>
                </ContentContainer>
            </Fade>

        </StyledModal>
    )

}