import styles from "./UpdateRecord.module.css";
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useContext } from "react/cjs/react.development";
import {AuthContext} from "../../Contexts/AuthContext";
import * as beerService from "../../services/beer"; 

import recordFormValidation  from "../../utils/recordFormVlidation";

import Error from "../Error/Error";
import { useNavigate } from 'react-router-dom';

function UpdateRecord() {

  const {user} =useContext(AuthContext);
  const [beer, setBeer] = useState({});
  const { beerId } = useParams();
  const [rating, setRating] = useState(1);
  const [hover, setHover] = useState(0);
  const [errors, setErrors]=useState([]); 
  const navigate = useNavigate();

  function getRating(arr){
    const valuesArr=arr.map(x=>x.value);
    const sum = valuesArr.reduce(function(a, b){
        return a + b;
        }, 0);
    const average= Math.round(sum/arr.length);
    return average;        
  }

  function checkIfUserIsOwner(ownerId){
    if (!user._id===ownerId){
     return navigate('/')
    }
  }  

  useEffect(() => {
   async function fetchData(){
    let beerResult = await beerService.getOne(beerId);
    checkIfUserIsOwner(beerResult.ownerId);
    setBeer(beerResult);
    setRating(getRating(beerResult.rating))
      }
      fetchData()
}, [beerId]);
 

const onBeerUpdate = (e) => {
  e.preventDefault();
  let formData = new FormData(e.currentTarget);

  let title = formData.get('beerName');   
  let imgUrl = formData.get('beerPicture');
  let type = formData.get('beerTypes');
  let country=formData.get('beerOrigin');
  let alcVol=formData.get('alcoholicContent');

  const updatedBeer=Object.assign(beer);
  updatedBeer.title=title;
  updatedBeer.imgUrl=imgUrl;
  updatedBeer.type=type;
  updatedBeer.country=country;
  updatedBeer.alcVol=alcVol;

  //update rating
  const indexOfRecordToUpdate=beer.rating.findIndex(x=>x.userRated==user._id);
  const newRating={userRated:user._id,value:rating}
  const copyRating=[...beer.rating]
  const removedOld=copyRating.splice(indexOfRecordToUpdate,1)
  copyRating.push(newRating);
  updatedBeer.rating=copyRating;

  const validationErrors=(recordFormValidation(updatedBeer));
  setErrors([...recordFormValidation(updatedBeer)]);
  console.log(validationErrors)
  console.log(errors)
    
//  WHY DO YOU TRIGGER BEFORE STATE IS UPDATED, AAAARGH
if (validationErrors.length<1){       
  beerService.updateBeer(beerId, updatedBeer)
    .then(result=>console.log(result))
     navigate('/');    
  } else{
    console.log(validationErrors)
  }
}

const ratingButtons=(
  

  {[...Array(5)].map((star, index) => {
  index += 1;
  return (
   setHover(index)}
  onMouseLeave={() => setHover(rating)}
  >
  🍺
  
  );
  })}


)

    return (
  <>
    

       Марка:
       

       Изображение:
       

      Тип:
      
        Тъмна
        Светла
        Вайс
        

      Произход:
      
        България
        Внос
       

      Алкохолно съдържание:
      

      {ratingButtons}
      {errors.length>0?:""}
      Запази
         
  
    );
  }
  
  export default UpdateRecord;