import React from 'react';
import { Flex } from 'grid-styled';
import styled from 'styled-components';
import Add from '@material-ui/icons/Add';
import { ThemeProvider } from 'styled-components';

const Container = Flex.extend`
    border-radius: 3px;
    border: ${props => props.theme.planCard.border};
    overflow: hidden;
    position: relative;
    color: ${props => props.theme.planCard.defaultTextColor};
`;

const Box = Flex.extend`
    padding: 15px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
`;

const FirstText = styled.p`
    margin: 0px;
`;

const PrincipalText = styled.h1`
    margin: 0px;
    font-size: 55px;
    font-weight: bolder;
`;

const Description = styled.p`
    margin: -5px;
    font-weight: bold;
    font-size: 14px;
`;

const Values = styled.p`
    font-weight: bold;
    margin: 0px;
    font-size: 14px;
    color: ${props => props.theme.planCard.paraColor}
`;

const De = styled.span`
    text-decoration: line-through;
    color: ${props => props.theme.planCard.deColor}
`;

const Spans = styled.span`
    font-weight: normal;
    text-decoration: none;
    color: ${props => props.theme.planCard.defaultTextColor};
`;

const ContainerButtom = Box.extend`
    border-left: ${props => props.theme.planCard.border};
    flex-direction: column;
    padding: 0px;
`;

const Buttom = Box.extend`
    width: 100%;
    height: 50%;
    font-size: 24px;
    cursor: pointer;

    ${props => props.theme.planCard.buttom}
`;

const Destaque = styled.p`
    position: absolute;
    color: white;
    text-align: center;
    width: 300px;
    padding: 3px 0px 3px 0px;
    font-size: 13px;
    transform: rotate(-45deg);
    left: -120px;
    top: 8px;

    ${props => props.theme.planCard.destaque}
`;

class PlanCard extends React.Component{
    render(){
        return(
            <ThemeProvider theme={this.props.theme} >
                <Container w={this.props.width || '250px'}>
                    <Box w={8/10}>
                        <FirstText>{this.props.firstText}</FirstText>
                        <PrincipalText>{this.props.principalText}</PrincipalText>
                        <Description>{this.props.descriptionText}</Description>
                        <Flex flexWrap='wrap' mt='20px' justifyContent='center'>
                            {this.props.de ? <Values><Spans>de </Spans><De>{this.props.de}</De></Values> : null}
                            {this.props.para ? <Values>&nbsp;{this.props.de ? <Spans>por </Spans> : null}{this.props.para}</Values> : null}
                        </Flex>
                    </Box>
                    <ContainerButtom w={2/10}>
                        <Buttom
                            style={{borderBottom: this.props.theme.planCard.border}}
                            onClick={e => {this.props.addClick(e)}}
                        >
                            +
                        </Buttom>
                        <Buttom
                            onClick={e => {this.props.infoClick(e)}}
                        >
                            i
                        </Buttom>
                    </ContainerButtom>
                    {this.props.destaque ? <Destaque>{this.props.destaque}</Destaque> : null}
                </Container>
            </ThemeProvider>
        );
    }
}

export default PlanCard;
