/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable react/no-array-index-key */
/* eslint-disable max-len */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable react/prop-types */
import React, { useState } from 'react';
import { updateContentProgress } from '../../api';

const RightSidebar = ({
  title, sectionOrder, contents, onContentClick, currentContentIndex, currentSectionIndex, currentSectionProgress
}) => {
  const [isActive, setIsActive] = useState(true);
  const [markChecbox, setMarkCheckbox] = useState(false);

  const markContentAsFinished = async contentOrder => {
    console.log('Calling me!');
    console.log(currentSectionIndex, currentContentIndex);
    try {
      const response = await updateContentProgress(currentSectionProgress[currentSectionIndex].content_progresses[currentContentIndex].section_progress_id, contentOrder, 'completed');
      console.log(response);
      setMarkCheckbox(true);
    } catch (error) {
      console.error('Error updating content progress:', error);
    }
  };

  console.log(currentSectionProgress);

  return (
    <div className="flex flex-col w-full gap-3">
      <div className="flex justify-between items-center border-b border-navy-50 gap-3 p-3" onClick={() => setIsActive(!isActive)}>
        <div className='color-navy-700 text-lg py-1 font-bold cursor-pointer'>{title}</div>
        <div className='cursor-pointer'>
          {isActive ? (
            <svg
              xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              viewBox="0 0 16 16" fill="none"
            >
              <path
                fillRule="evenodd" clipRule="evenodd" d="M2.86225 10.4717C2.6019 10.2114 2.6019 9.78927 2.86225 9.52892L7.52892 4.86225C7.78927 4.6019 8.21138 4.6019 8.47173 4.86225L13.1384 9.52892C13.3987 9.78927 13.3987 10.2114 13.1384 10.4717C12.878 10.7321 12.4559 10.7321 12.1956 10.4717L8.00033 6.27647L3.80506 10.4717C3.54471 10.7321 3.1226 10.7321 2.86225 10.4717Z"
                fill="#0099FF"
              />
            </svg>
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              viewBox="0 0 16 16" fill="none"
            >
              <path
                fillRule="evenodd" clipRule="evenodd" d="M13.1377 5.52827C13.3981 5.78862 13.3981 6.21073 13.1377 6.47108L8.47108 11.1377C8.21073 11.3981 7.78862 11.3981 7.52827 11.1377L2.8616 6.47108C2.60125 6.21073 2.60125 5.78862 2.8616 5.52827C3.12195 5.26792 3.54406 5.26792 3.80441 5.52827L7.99967 9.72353L12.1949 5.52827C12.4553 5.26792 12.8774 5.26792 13.1377 5.52827Z"
                fill="#6C73A8"
              />
            </svg>
          )}
        </div>
      </div>
      {isActive && (
        <div className="">
          <ul className=''>
            {contents.map(content => (
              <li
                className={`${(currentContentIndex === content.content_order && currentSectionIndex === sectionOrder) ? 'bg-navy-25' : 'bg-white'} radius-md py-3 px-2 w-full flex justify-between cursor-pointer`}
                key={content.content_order}
                onClick={() => onContentClick(sectionOrder, content.content_order)}
              >
                <div className='flex justify-between items-center w-full'>
                  <div className='flex justify-start items-center'>
                    <label key={content.content_order} className='flex justify-start items-center'>
                      <input
                        key={content.content_order}
                        id={content.content_order}
                        name={content.title}
                        type="checkbox"
                        value={content.title}
                        checked={currentSectionProgress.length > 0 ? currentSectionProgress[sectionOrder].content_progresses[content.content_order].status === 'completed' || markChecbox : false}
                        onClick={() => markContentAsFinished(content.content_order)}
                        aria-describedby="desc"
                        className="h-4 w-4 min-h-4 min-h-4 radius-sm border border-green-700 color-green-700 focus:border-green-600 mr-3"
                      />

                    </label>
                    <div className='mr-1'>
                      {content.type === 'tutorial' ? (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className='w-4 h-4 min-w-4 min-h-4'
                          viewBox="0 0 16 16" fill="none"
                        >
                          <g clipPath="url(#clip0_56_6116)">
                            <path
                              fillRule="evenodd" clipRule="evenodd" d="M7.99984 15.333C12.0499 15.333 15.3332 12.0498 15.3332 7.99967C15.3332 3.94959 12.0499 0.666342 7.99984 0.666342C3.94975 0.666342 0.666504 3.94959 0.666504 7.99967C0.666504 12.0498 3.94975 15.333 7.99984 15.333ZM7.0363 4.69065C6.59327 4.3953 5.99984 4.71289 5.99984 5.24535V10.754C5.99984 11.2865 6.59327 11.6041 7.0363 11.3087L11.1678 8.55438C11.5636 8.29049 11.5636 7.70886 11.1678 7.44497L7.0363 4.69065Z"
                              fill="#0A1551"
                            />
                          </g>
                          <defs>
                            <clipPath id="clip0_56_6116">
                              <rect width="16" height="16" fill="white" />
                            </clipPath>
                          </defs>
                        </svg>
                      ) : (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className='w-4 h-4 min-w-4 min-h-4'
                          viewBox="0 0 16 16" fill="none"
                        >
                          <path
                            fillRule="evenodd" clipRule="evenodd" d="M10.5909 1.72353C11.1116 1.20283 11.9559 1.20283 12.4766 1.72353L14.2757 3.5227C14.7964 4.0434 14.7964 4.88762 14.2757 5.40832L6.20574 13.4783C6.05147 13.6326 5.8617 13.7466 5.65307 13.8105L3.06131 14.6036C2.03971 14.9162 1.08372 13.9604 1.39611 12.9387L2.18875 10.3464C2.25258 10.1377 2.36667 9.94782 2.52101 9.79348L10.5909 1.72353ZM11.5338 2.66634L9.87069 4.32941L11.6699 6.12858L13.3329 4.46551L11.5338 2.66634ZM3.46381 10.7363L8.92788 5.27222L10.727 7.07139L5.26293 12.5355L2.67117 13.3286L3.46381 10.7363ZM8.66667 13.333C8.29848 13.333 8 13.6315 8 13.9997C8 14.3679 8.29848 14.6663 8.66667 14.6663H14C14.3682 14.6663 14.6667 14.3679 14.6667 13.9997C14.6667 13.6315 14.3682 13.333 14 13.333H8.66667Z"
                            fill="#0A1551" fillOpacity="0.5"
                          />
                        </svg>
                      )}
                    </div>
                  </div>
                  <span className='hidden'>{content.type === 'tutorial' ? 'Tutorial' : 'Quiz'}</span>
                  <div className='color-navy-700 text-md mr-8'>{content.title}</div>
                </div>
                <div className='color-blue-300 text-xs'>{content.content_estimated_time}</div>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default RightSidebar;