import React, {useState} from 'react'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarIcon from '@material-ui/icons/Star';
import TextField from "@material-ui/core/TextField";
import { Button } from '@material-ui/core';
import EditIcon from '@material-ui/icons/Edit';
import Grid from '@material-ui/core/Grid';
import {axiosPostRequest} from '../HelperFunctions/getAxiosConfig'

export default function CommentForm (props) {
    const [rating, setRating] = useState({
        error : true,
        value : 0
    })
    const [comment, setComment] = useState({
        error : false,
        value : ''
    })

    const handleChange = (e) => {
        const userInput = e.target.value
        const flag = (userInput.length === 0 ? true : false);
        setComment({...comment, error : flag, value : userInput})
    }

    const [attemptedSubmit, setAttempt] = useState(false)

    function handleSuccess (data) {
        props.handleSnackbar(1)
        props.rerenderCallback()
    }
    const handleSubmit = (e) => {
        e.preventDefault()
        const finalRating = rating
        const finalComment = comment

        if (!(finalRating.error || finalComment.error)) {
            let type = props.recurso ? 'learning_objects' : 'collections'
            const url = `/${type}/${props.recursoId}/reviews`

            let payload = {
                "review" : {
                    "description" : finalComment.value,
                    "review_ratings_attributes" : [
                        {
                            "rating_id" : 1,
                            "value" : finalRating.value
                        }
                    ]
                }
            }

            axiosPostRequest(url, payload, handleSuccess, (error) => {console.log(error)})
        }
        else {
            setAttempt(true)
        }
    }

    return (
        <StyledForm onSubmit={handleSubmit}>
            <label htmlFor="avaliacao-estrelas" className="start-label">
                {props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
            </label>
            <div className="stars-container">
                <Rating
                  name="avaliacao-estrelas"
                  value={rating.value}
                  precision={0.5}
                  style={{color:"#ff9226"}}
                  onChange = {(e, newValue) => {setRating({...rating, error : newValue === null ? true : false, value : newValue})}}
                  emptyIcon={<StarIcon fontSize="inherit" style={{color : "#666"}} />}
                  getLabelText={(value) => {return(value + ' Estrela' + (value !== 1 ? 's' : ''))}}
                />
            </div>
            <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>

            <Grid container>
                <Grid item xs={10}>
                <StyledTextField
                    colecao={!props.recurso}
                    value={comment.value}
                    multiline
                    rows="5"
                    error={comment.error}
                    label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
                    onChange={e => handleChange(e)}
                    required={true}
                    help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
                />
                </Grid>
                <Grid item xs={2}>
                    <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
            {
                props.recurso ?
                (
                    <OrangeButton type="submit">Publicar</OrangeButton>
                )
                :
                (
                    <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
                )
            }
        </div>
        </Grid>

        <div className="campos-obrigatorios">* Campos obrigatórios.</div>
            </Grid >
        </StyledForm>
    )
}

const PurpleButton = styled(Button)`
    background-color : #673ab7 !important;
    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
    font-weight : 600 !important;
    color : #fff !important;
    .icon {
        vertical-align : middle !important;
        font-weight : normal !important;
        font-style : normal !important;
        font-size : 24px !important;
        line-height : 1 !important;
        letter-spacing : normal !important;
        text-transform : none !important;
        display : inline-block !important;
        white-space : nowrap !important;
        word-wrap : normal !important;
        direction : ltr !important;
        padding-right : 2px;
    }
`

const OrangeButton = styled(Button)`
    color : rgba(255,255,255,0.87) !important;
    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
    font-weight : 600 !important;
    background-color : #ff7f00 !important;
`

const StyledTextField = styled(TextField)`
    .MuiInputBase-root {
        margin-bottom : 5px;
    }

    label.Mui-focused {
        color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
    }

    .MuiInput-underline::after {
        border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)" };
    }

    label.Mui-focused.Mui-error {
        color : red;
    }

    width: 95%;
`

const StyledForm = styled.form`
    display : flex;
    flex-direction : column;
    text-align : start;

    .start-label {
        font-size : 14px;
        max-width : 100%;
        display : inline-block;
        margin-bottom : 0;
        color : #a5a5a5;
        font-weight : 400;
    }

    .stars-container {
        padding-top : 10px;
        padding-bottom : 5px;
        display : flex;
        flex-direction : row;
        align-self : flex-start;
        margin-bottom : 5px;
        color : #a5a5a5;
    }

    .star-alert {
        color : #666;
        text-align : start;
    }

    .campos-obrigatorios {
        padding-top : 18px;
        font-weight : 400;
        font-size : 12px;
        color :#a5a5a5;
    }
`