ReportUserForm.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState} from 'react';
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
import { withStyles, makeStyles } from '@material-ui/core/styles';

const StyledRadio = withStyles({
    root: {
        '&$checked': {
            color: '#ff7f00 !important',
        },
    },
    checked: {},
})((props) => <Radio {...props} />);

export const useStyles = makeStyles(theme => ({
    darkTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        color: "white",
        width: "100%"
    },
    lightTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        color: "black",
        width: "100%"
    }
}));

export default function ReportForm (props) {
    const [value, setValue] = useState(-1);

    const classes = useStyles();

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    /*values are set according to backend complaint id*/
    const [options] = React.useState([
        {value : "6", text :'Esta pessoa está fingindo ser eu ou alguém que eu conheço.'},
        {value : "4", text : 'Essa pessoa envia spam.'},
        {value : "3", text : 'Essa é uma conta falsa.'},
        {value : "1", text : ' A publicação dessa pessoa viola os diretos autorais.'},
        {value : "2", text : 'As publicações dessa pessoa contém conteúdo ofensivo/abusivo.'}
    ])

    const [moreInfo, setMoreInfo] = React.useState({
        key : false,
        value : "",
    })

    const handleChangeMoreInfo = (e) => {
        const userInput = e.target.value

        const flag = userInput.length > 150 ? true : false

        setMoreInfo({...moreInfo,
            key : flag,
            value : userInput
        })
    }

    const formSubmit = (e) => {
        e.preventDefault()
        const finalRadioValue = value
        const finalMoreInfo = moreInfo

        if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
            props.handleSubmit(finalRadioValue, finalMoreInfo.value)
        }
    }

    return (
        <form onSubmit={(e) => {formSubmit(e)}}>
            <StyledFormControl contrast={props.contrast} component="fieldset">
                <RadioGroup value={value} onChange={handleChange}>
                    {
                        options.map(option =>
                            <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} />
                        )
                    }
                </RadioGroup>
            </StyledFormControl>

            <StyledTextField
                contrast={props.contrast}
                id = {"Escreva mais sobre o problema"}
                label={"Escreva mais sobre o problema"}
                type = {"text"}
                value = {moreInfo.value}
                onChange = {e => handleChangeMoreInfo(e)}
                helperText = {moreInfo.value.length + '/150'}
                multiline={true}
                rowsMax = {"5"}
                error = {moreInfo.key}
                InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
                required = {false}
                style={{width:"100%"}}
            />

            <ButtonsDiv>
                <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
                <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
            </ButtonsDiv>
        </form>
    );
}

export const ButtonsDiv = styled.div`
    display : flex;
    flex-direction : row;
    justify-content : flex-end;
    align-items : center;
`

export const ButtonCancelar = styled(Button)`
    color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
    height : 36px !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    font-weight : 500 !important;
    border-radius : 3px !important;
    background-color: transparent;
    min-width : 88px !important;
    height : 36px !important;
`

export const ButtonEnviar = 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"};
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 36px !important;
    border-radius: 3px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
    outline : none !important;
    min-width : 88px !important;
    vertical-align : middle !important;
    margin : 6px 8px !important;

    .MuiButton-label {
        padding-right : 16px;
        padding-left : 16px;
    }
`
export const StyledTextField = styled(TextField)`
    
    padding: 20px 20px 20px 20px;
    .MuiOutlinedInput-root {
        &.Mui-focused fieldset {
            border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
        }
        fieldset {
            border-color: ${props => props.contrast === "" ? "#666" : "white"};
        }
    }

    label{
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }

    label.Mui-focused {
        color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
    }

    .MuiFormHelperText-root {
        text-align : left;
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }

    .MuiInput-underline::after {
        border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
    }

`

export const StyledFormControl = styled(FormControl)`
    .MuiFormControlLabel-root {
        color: ${props => props.contrast === "" ? "#666" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
    }
    .MuiIconButton-label {
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }

    .PrivateRadioButtonIcon-checked {
        color : orange;
    }

    .MuiTypography-body1 {
        font-size : 14px;
    }
`