import React, { useState, useEffect } from 'react';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig';
import { yellow } from "@material-ui/core/colors";

const StyledFormControl = styled(FormControl)`
    display: "block ruby";
    margin-top : 0 !important ;
`

const BlueRadio = withStyles({
    root: {
        color: '#666',
        '&$checked': {
            color: '#00bcd4',
        },
    },
    checked: {},
})((props) => <Radio color="default" {...props} />);

const ContrastRadio = withStyles({
    root: {
        color: yellow[400],
        '&$checked': {
            color: yellow[600],
        },
    },
    checked: {},
})((props) => <Radio color="default" {...props} />);

export default function PublicationPermissionsContent(props) {

    const [questionsArr, setQuestionsArr] = useState([])
    const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) }

    function handleSuccess(data) {
        handleSetQuestionsArr(data)
    }

    useEffect(() => {
        const url = `/questions/`

        getRequest(url, handleSuccess, (error) => { console.log(error) })

    }, [])

    return (
        <div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
            <Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
            <div classname="texto-termos">
                <div classname="title">
                    <Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}>
                        PERMISSÃO DE PUBLICAÇÃO
                    </Typography>
                </div>
                <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
                    a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
                    recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas
                    (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>Políticas de Conteúdo</strong></a>)
                </p>
                <Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}>
                    Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
                    inviabiliza a publicação do recurso em nossa rede.
                </Typography>
                <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>

                <StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}>
                    <Grid container>
                        {
                            questionsArr.map((question, index) =>

                                (question.status === 'active' && question.id !== 4) &&
                                <React.Fragment key={question.id}>
                                    <Grid item xs={10}>
                                        <p>{question.description}</p>
                                    </Grid>
                                    <Grid item xs={2}>
                                        <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
                                            <FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
                                        </RadioGroup>
                                    </Grid>
                                </React.Fragment>

                            )
                        }
                    </Grid>
                </StyledFormControl>
            </div>
        </div>

    )
}

// {/*
//     <Grid item xs={10}>
//     <p>
//     O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?
//     </p>
//     </Grid>
//     <Grid item xs={2}>
//     <RadioGroup row name="radio1" onChange={props.handleRadios}>
//         <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
//     </RadioGroup>
//     </Grid>

//     <Grid item xs={10}>
//     <p>
//     O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
//     </p>
//     </Grid>
//     <Grid item xs={2}>
//     <RadioGroup row name="radio2" onChange={props.handleRadios}>
//         <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
//     </RadioGroup>
//     </Grid>
//     <Grid item xs={10}>
//     <p>
//     O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
//     </p>
//     </Grid>
//     <Grid item xs={2}>
//     <RadioGroup row name="radio3" onChange={props.handleRadios}>
//         <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
//     </RadioGroup>
//     </Grid>
//     </Grid>
//     */}