import React, { useEffect, useState } from "react";
import { Button } from "reactstrap";
import app from "firebase/app";
import { TextArea } from "../../containers/StyledComponent/Index";
import MDSpinner from "react-md-spinner";
import StarRatings from "react-star-ratings";
import Rating from "material-ui-rating";
function ReviewContent(props) {
  const [review, setReviews] = useState({
    isLoading: true,
    isPaid: false,
    hasilInput: "",
    input: ""
  });

  const [reviewed, setReviewed] = useState({
    data: [],
    isSumbit: false
  });
  const [rating, setRating] = useState({
    rating: 0
  });
  const changeRating = (Rating, name) => {
    setRating({
      rating: Rating
    });
  };
  useEffect(() => {
    const db = app.firestore();
    if (props.user === "logout") {
      db.collection("courses")
        .doc(props.id)
        .get()
        .then(val => {
          if (val.data().reviews === undefined) {
            setReviewed({
              data: null
            });
          } else {
            setReviewed({
              data: val.data().reviews
            });
          }
        });
      setReviews({
        isPaid: false,
        isLoading: false
      });
    } else {
      db.collection("courses")
        .doc(props.id)
        .get()
        .then(val => {
          console.log("myCOurse", val.data().reviews);
          if (val.data().reviews === undefined) {
            setReviewed({
              data: null
            });
          } else {
            if (val.data().reviews.user_id === props.id) {
              setReviewed({
                data: val.data().reviews,
                isSumbit: true
              });
            } else {
              setReviewed({
                data: val.data().reviews,
                isSumbit: false
              });
            }
          }
        });
      db.collection("users")
        .doc(props.user)
        .get()
        .then(val => {
          if (val.data().myCourse === undefined) {
            setReviews({
              isPaid: false,
              isLoading: false,
              ...val.data()
            });
          } else {
            const isPaid = val.data().myCourse.includes(props.id);
            console.log(isPaid);
            if (isPaid) {
              setReviews({
                isPaid: true,
                isLoading: false,
                ...val.data()
              });
            } else {
              setReviews({
                isPaid: false,
                isLoading: false,
                ...val.data()
              });
            }
          }
        });
    }
  }, [props]);
  const handleSubmit = evt => {
    let db = app.firestore();
    evt.preventDefault();
    const courseId = props.id;
    let addCourse = db.collection("courses").doc(courseId);
    let data = {
      photo: review.photo_url,
      name: review.name,
      reviews: review.input,
      user_id: props.user,
      rating: rating
    };
    return addCourse
      .update({
        reviews: app.firestore.FieldValue.arrayUnion(data)
      })
      .then(function() {
        setReviews({
          ...review,
          isLoading: true
        });
        db.collection("courses")
          .doc(courseId)
          .get()
          .then(val => {
            console.log("myCOursebaru", val.data().reviews);
            if (val.data().reviews === undefined) {
              console.log("undefined");
              setReviewed({
                data: []
              });
            } else {
              console.log("ada");
              setReviewed({
                data: val.data().reviews,
                isSumbit: true
              });
              setReviews({
                ...review,
                input: "",
                isLoading: false
              });
            }
          })
          .catch(function(error) {});
      })
      .catch(function(error) {});
  };

  const handleChange = evt => {
    evt.preventDefault();
    setReviews({
      ...review,
      [evt.target.name]: evt.target.value
    });
  };

  if (reviewed.data === null) {
    return (
      <div>
        <div>
          <div
            style={{
              display: "flex",
              marginBottom: "10px",
              width: "100%",
              padding: "20px 20px 30px 20px"
            }}
          >
            <div>Belum ada review dari user</div>
            <hr />
          </div>
        </div>
        {review.isPaid ? (
          <div>
            <form
              onSubmit={e =>  { 
// preventDefault agar tidak merefresh page ketika //submit
e.preventDefault();
handleSubmit(e)} }
              
            >
              <TextArea
                name="input"
                type="text-area"
                onChange={(e) => {
// Pakai operator spread ...review biar properti yang // lain ga kena efeknya
// Yang kerubah cuma properti input

setReview({...review,
input : e.target.value
})}
}
                placeholder="Masukan review"
                value={review.input}
              />
              <Button color="success" type="submit" value="Submit">
                Submit
              </Button>
            </form>
          </div>
        ) : (
          <div>
            <form>
              <TextArea
                name="review"
                type="text-area"
                placeholder="Masukan review"
                disabled
              />
              <Button color="success" type="submit" value="Submit">
                Submit
              </Button>
            </form>
          </div>
        )}
      </div>
    );
  } else {
    return (
      <div>
        {reviewed.data.map(val => {
          return (
            <div>
              <div
                style={{
                  display: "flex",
                  marginBottom: "10px",
                  width: "100%",
                  padding: "20px 20px 30px 20px"
                }}
              >
                <div
                  style={{
                    borderRight: "10px solid transparent"
                  }}
                >
                  <img
                    src={val.photo}
                    alt="logo"
                    width="24px"
                    height="24px"
                    style={{
                      borderRadius: "50%"
                    }}
                  />
                </div>
                <div
                  style={{
                    width: "100%"
                  }}
                >
                  <div>{val.name}</div>
                  <div
                    style={{
                      height: "100%",
                      width: "100%"
                    }}
                  >
                    {val.reviews}
                  </div>
                  <StarRatings
                    rating={val.rating}
                    starRatedColor="blue"
                    numberOfStars={5}
                    name="rating"
                  />
                  {/* <Rating rating={val.rating} max={5} name="rating" /> */}
                </div>
              </div>
              <hr />
            </div>
          );
        })}
        {review.isLoading ? <MDSpinner size={24} /> : <div />}
        {review.isPaid ? (
          <div>
            {reviewed.isSumbit ? (
              <form
                onSubmit={e =>  handleSubmit(e)}
                
              >
                <TextArea
                  name="input"
                  type="text-area"
onChange={(e) => {
// Pakai operator spread ...review biar properti yang // lain ga kena efeknya
// Yang kerubah cuma properti input

setReview({...review,
input : e.target.value
})}
}
                  placeholder="Masukan review"
                  value={review.input}
                  disabled
                />
                <Button type="submit" color="success" value="Submit" disabled>
                  Submit
                </Button>
              </form>
            ) : (
              <form onSubmit={e => { 
// preventDefault agar tidak merefresh page ketika //submit
e.preventDefault();
handleSubmit(e);
}}>
                <TextArea
                  onChange={(e) => {
// Pakai operator spread ...review biar properti yang // lain ga kena efeknya
// Yang kerubah cuma properti input

setReview({...review,
input : e.target.value
})}
}
                  name="input"
                  type="text-area"
                  placeholder="Masukan review"
                  value={review.input}
                />
                <StarRatings
                  rating={rating.rating}
                  starRatedColor="blue"
                  changeRating={changeRating}
                  numberOfStars={5}
                  name="rating"
                />
                {/* <Rating
                  rating={rating.rating}
                  changeRating={changeRating}
                  max={5}
                  name="rating"
                /> */}
                <Button color="success" type="submit" value="Submit">
                  Submit
                </Button>
              </form>
            )}
          </div>
        ) : (
          <div>
            <form
              onSubmit={e => { 
// preventDefault agar tidak merefresh page ketika //submit
e.preventDefault();
handleSubmit(e) }}
              
            >
              <TextArea
                name="review"
                type="text-area"
                placeholder="Masukan review"
                disabled
              />

              <Button type="submit" color="success" value="Submit" disabled>
                Submit
              </Button>
            </form>
          </div>
        )}
      </div>
    );
  }
}

export default ReviewContent;