import { useContext, useState } from "react";
import { useLocation, Link } from "react-router-dom";

import { CourseContext } from "../../../contexts/Courses/CourseContext";
import { AuthContext } from "../../../contexts/Users/AuthContext";
import Paths from "../../../utils/Paths";
import * as courseService from '../../../services/courseService'
import toastrNotificationsService from "../../../services/toastrNotificationsService";
import * as iconHelper from "../../../utils/getCourseIconByKey";

import "../../../assets/styles/services.css";

export const CourseDetails = ({ handleLinkClick, ...course }) => {
  const location = useLocation();
  const { updateCourseFunc } = useContext(CourseContext);
  const { auth } = useContext(AuthContext);
  const isAuthenticated = !!auth.username;
  const [canLike, setCanLike] = useState(true);
  const [canDisLike, setCanDisLike] = useState(true);

  const likesHandler = () => {
    if (isAuthenticated) {
      if (!course.likes) {
        course.likes = [];
      }
      if (!course.dislikes) {
        course.dislikes = [];
      }
      let courseWithUpdatedLikes;
      if (course.likes.includes(auth._id) || course.dislikes.includes(auth._id)) {
        courseWithUpdatedLikes = {
          ...course
        }
        // setCanLike(false);
        toastrNotificationsService.showError('You have already voted for this course')
      }
      else {
        courseWithUpdatedLikes = {
          ...course,
          likes: [...course.likes, auth._id]
        }
        setCanLike(false);
        setCanDisLike(false);
        toastrNotificationsService.showSuccess('You have successfully voted for this course!')
      }


      const editedCourse = courseService.edit(course._id, courseWithUpdatedLikes);
      updateCourseFunc(editedCourse);
    }
    else {
      toastrNotificationsService.showError('Only registered users can vote. Please log in your account')
    }
  }

  const dislikesHandler = () => {
    if (isAuthenticated) {
      if (!course.likes) {
        course.likes = [];
      }
      if (!course.dislikes) {
        course.dislikes = [];
      }
      let courseWithUpdatedDislikes;

      if (course.likes.includes(auth._id) || course.dislikes.includes(auth._id)) {
        courseWithUpdatedDislikes = {
          ...course
        }
        toastrNotificationsService.showError('You have already voted for this course')
      }
      else {
        courseWithUpdatedDislikes = {
          ...course,
          dislikes: [...course.dislikes, auth._id]
        }
        setCanLike(false);
        setCanDisLike(false);
        toastrNotificationsService.showSuccess('You have successfully voted for this course!')
      }


      const editedCourse = courseService.edit(course._id, courseWithUpdatedDislikes);
      updateCourseFunc(editedCourse);
    } else {
      toastrNotificationsService.showError('Only registered users can vote. Please log in your account')
    }
  }

  return (
    <div className="col-xl-4 col-md-6 service_col">
      <div className="service">
        <div className="service_title_container d-flex flex-row align-items-center justify-content-start">
          <div>
            <div className="service_icon">
              <img
                src={
                  iconHelper.getIcon(course.name) !== undefined
                    ? iconHelper.getIcon(course.name)
                    : course.imageUrl
                }
                alt={course.name}
              />
            </div>
          </div>
          <div className="service_title">{course.name} Class</div>
        </div>
        {location.pathname === "/" ? (
          <div className="service_text_part">
            <p>{course.description}</p>
          </div>
        ) : (
          <>
            <div className="service_text">
              <p>{course.description}</p>
            </div>
            <div className="container">
              <div className="row justify-content-center">
                <button
                  onClick={() => likesHandler()}
                  className="like_dislike_btn"><i className="fa fa-3x fa-thumbs-up" aria-hidden="true"></i></button>
                <span className="likes_dislikes">{course.likes.length === 0 ? '' : course.likes.length}</span>
                <button
                  onClick={() => dislikesHandler()}
                  className="like_dislike_btn"><i className="fa fa-3x fa-thumbs-down" aria-hidden="true"></i></button>
                <span className="likes_dislikes">{course.dislikes.length === 0 ? '' : course.dislikes.length}</span>
              </div>
            </div>
          </>
        )}
        {location.pathname === "/" && (
          <div className="course_link">
            <Link to={Paths.Courses} onClick={handleLinkClick}>Read More</Link>
          </div>
        )}
      </div>
    </div>
  );
};