import { Form } from "react-router-dom";
import StarPicker from 'react-star-picker';
import "../stylesheets/shared.css";
import { useState } from "react";

function getTextArea(errors) {
  if(errors && errors.review) {
    const error_messages = errors.review.map(message => 
      <p className="mt-2 text-sm text-red-600 dark:text-red-500">{message}</p>  
    );

    return (
      <div className="my-2">
        <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm bg-red-50 border border-red-500 text-red-900 placeholder-red-700 rounded-lg border focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
        {error_messages}
      </div>
    );
  }

  return (
    <div className="my-2">
      <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
    </div>
  );
}

export default function ReviewForm({ product, errors }) {
  const [rating, setRating] = useState(0);
  const review_field = getTextArea(errors);

  const onChange = (value, name) => {
    setRating(value);
  };

  return (
    <Form method="post" action={`/products/${product.public_id}`} className="flex flex-col justify-end">
      <input type="hidden" id="rating-field" name="rating" value={rating}/>
      <StarPicker onChange={onChange} value={rating} name="rating" />
      {review_field}
      <div className="my-2">
        <button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
                name="intent" value="create_review">
          Enviar
        </button>
      </div>
    </Form>
  );
}