import React, {useState, useEffect} from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
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 axios from 'axios'
import {apiUrl} from '../env';

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

const StyledDivEvaluateQuestion = styled.div`
    display :flex;
    justify-content : space-between;
`

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

export default function PublicationPermissionsContent (props) {
    {/*To DO change to get https://api.portalmec.c3sl.ufpr.br/v1/questions*/}

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

    useEffect(() => {
        axios.get(`${apiUrl}/questions/`).then(
            (response) => {
                console.log(response)
                handleSetQuestionsArr(response.data)
            },
            (error) => {
                console.log('falhou em get questions')
            }
        )

    }, [])

    return (
        <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
            <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", 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={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}>
                            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={{color:"initial"}}><strong>Políticas de Conteúdo</strong></a>)
                    </p>
                    <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", 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.id !== 4 &&
                            <React.Fragment key={question.id}>
                                <Grid item xs={10}>
                                    <p>{question.description}</p>
                                </Grid>
                                <Grid item xs={2}>
                                    <RadioGroup row name={"radio" + (index + 1)} onChange={props.handleRadios}>
                                        <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
                                    </RadioGroup>
                                </Grid>
                            </React.Fragment>
                            
                        )
                        }
                    </Grid>
                    </StyledFormControl>
                </div>
        </CardContent>

    )
}

{/*
    <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>
    */}