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 CloseModalButton from './CloseModalButton'

const StyledModal = styled(Modal)`
    .djXaxP{
        margin : 0 !important;
    }
    display : flex;
    align-items: center;
    justify-content : center;
    text-align : center;
    padding : 10px !important;
    max-width : none;
    max-height : none;
`

const HeaderDiv = styled.div`
    display : flex;
    flex-direction : row;
    align-items : center;
    text-align : center;
    margin : 20px 30px;

    h3 {
        font-size : 24px;
        margin-top : 20px;
        margin-bottpm : 10px
        font-weight : normal;
    }
`
const ContentContainer = styled.div`
color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"};

    box-sizing : border-box;
    max-width : none;
    align : center;
    display : flex;
    flex-direction : column;
    min-width : 240px;
    max-height : none;
    position : relative;
    padding : 10px;
    border-radius : 4px;

    @media screen and (max-width : 899px) {
        width : 100%;
        max-height : 600px;
    }
`
const ButtonCancelar = styled(Button)`
color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};

    &:hover {
        background-color : rgba(158,158,158,0.2) !important;
    }
    outline : none !important;
    text-align : center !important;
`

const ButtonConfirmar = styled(Button)`
    color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
    background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
    border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
    border-radius : 3px !important;
`

export default function ModalConfirmarUnfollow (props) {
    const text = {
        header : "Tem certeza que deseja deixar de seguir este usuário?",
        explanation : "Este usuário deixará de fazer parte da sua rede."
    }

    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>
                        <span style={{width:"32px"}}/>
                        <h3>
                            {text.header}
                        </h3>
                        <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
                    </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: "space-evenly"}}>
                            <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
                            <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
                        </div>
                    </div>
                </ContentContainer>
            </Fade>

        </StyledModal>
    )

}