/* eslint-disable no-nested-ternary */
/* eslint-disable no-undef */
/* eslint-disable max-len */
/* eslint-disable import/order */
/* eslint-disable react/button-has-type */
/* eslint-disable react/no-array-index-key */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState, useEffect } from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionBody
} from '@material-tailwind/react';
// import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
import { fetchFilterParameters, fetchFilteredCourses } from '../api';
import { connect } from 'react-redux';
import { setMultipleCategoryValues } from '../actions/categoryActions';
import { setMultipleSortValues } from '../actions/sortActions';
import { setClearFilters } from '../actions/filterActions';

function Icon({ id, open }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none"
      className={`${id === open ? 'rotate-180' : 'rotate-0'} h-5 w-5 mt-2`}
    >
      <path
        // eslint-disable-next-line max-len
        fillRule="evenodd" clipRule="evenodd" d="M7.29289 10.2929C7.68342 9.90237 8.31658 9.90237 8.70711 10.2929L12 13.5858L15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929C17.0976 10.6834 17.0976 11.3166 16.7071 11.7071L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L7.29289 11.7071C6.90237 11.3166 6.90237 10.6834 7.29289 10.2929Z"
        fill="#6C73A8"
      />
    </svg>
  );
}

const CUSTOM_ANIMATION = {
  mount: { scale: 1 },
  unmount: { scale: 0.9 }
};
const Sidebar = ({
  onCategoryClick, handleSortClick, handleClearFilter
}) => {
  const [checkedCategories, setCheckedCategories] = useState([]);
  const [courses, setCourses] = useState([]);
  const [categories, setCategories] = useState([]);
  const [tags, setTags] = useState([]);
  const [sortByValue, setSortByValue] = useState('total_users');
  // -------------from filterComponent.js
  const [open, setOpen] = useState([]);
  // const [alwaysOpen, setAlwaysOpen] = useState(true);
  const sorts = [
    {
      id: 1,
      name: 'popular',
      title: 'Popular',
      value: 'total_users',
      ariaDescribedby: 'popular-description'
    },
    {
      id: 2,
      name: 'new',
      title: 'New',
      value: 'created_at',
      ariaDescribedby: 'new-description'
    }
  ];

  // const handleSortChange = async orderBy => {
  //   console.log('handle sort cahnge calisti');
  //   console.log(orderBy);
  //   onSortClick(orderBy);
  // };

  const handleCategoryChange = (categoryName, value, checked) => {
    if (checked) {
      onCategoryClick({ [categoryName]: [...(checkedCategories[categoryName] || []), value] });
      setCheckedCategories(prevState => ({ ...prevState, [categoryName]: [...(prevState[categoryName] || []), value] }));
    } else {
      const filteredValues = (checkedCategories[categoryName] || []).filter(item => item !== value);
      onCategoryClick({ [categoryName]: filteredValues });
      setCheckedCategories(prevState => ({ ...prevState, [categoryName]: filteredValues }));
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      await fetchFilterParameters().then(response => {
        if (response) {
          setCategories(response.categories);
          setTags(response.tags);
        }
      }).catch(error => console.error('Failed to fetch filter parameters:', error));
    };
    fetchData();
  }, []);
  useEffect(() => {
    const fetchData = async () => {
      await fetchFilterParameters().then(response => {
        if (response) {
          setCategories(response.categories);
          setTags(response.tags);
        }
      }).catch(error => console.error('Failed to fetch filter parameters:', error));
    };
    fetchData();
  }, []);

  const handleOpen = value => {
    if (open.includes(value)) {
      setOpen(prevState => prevState.filter(item => item !== value));
    } else {
      setOpen(prevState => [...prevState, value]);
    }
  };

  const countSelectedCategories = categoryName => {
    return (checkedCategories[categoryName] || []).length;
  };

  return (
    <>
      <button className='hidden' onClick={handleClearFilter}>Clear</button>
      <Accordion
        open={open.includes(1)}
        animate={CUSTOM_ANIMATION}
        icon={<Icon id={1} open={open} />}
      >
        <AccordionHeader onClick={() => handleOpen(1)} className='flex justify-between items-center w-full border-b border-b-navy-50'>
          <div className='flex w-full justify-between'>
            <div className='color-navy-700 font-bold text-md font-cırcular'>SORT BY</div>
            <div className='color-navy-300 text-md font-normal ml-4 font-cırcular flex'>
              <span>{sortByValue === 'created_at' ? 'New' : 'Popular'}</span>
            </div>
          </div>
        </AccordionHeader>
        <AccordionBody className="flex flex-col gap-3">
          {sorts.map(sort => (
            <div key={sort.name} className="relative flex items-center">
              <label key={sort.name} className="flex justify-start items-center font-normal color-navy-300 text-md cursor-pointer w-full">
                <input
                  id={sort.id}
                  aria-describedby={sort.ariaDescribedby}
                  name='sort'
                  type='radio'
                  value={sort.value}
                  checked={sortByValue === sort.value} // This is the added line
                  className="h-4 w-4 radius-sm border border-navy-700 color-navy-700 focus:border-navy-600 mr-3 cursor-pointer"
                  onClick={e => { handleSortClick(sort.value); setSortByValue(sort.value); }}
                />
                <span>{sort.title}</span>
              </label>
            </div>
          ))}
        </AccordionBody>
      </Accordion>
      {categories !== undefined && (categories.map((category, idx) => (
        <Accordion
          key={category.name + idx}
          open={open.includes(idx + 2)}
          animate={CUSTOM_ANIMATION}
          icon={<Icon id={2} open={open} />}
        >
          <AccordionHeader key={category.name + idx} onClick={() => handleOpen(idx + 2)} className='flex font-cırcular justify-between items-center w-full border-b border-b-navy-50'>
            <div key={category.name + idx} className='flex w-full justify-between'>
              <div key={`${category.name + idx}div1`} className='color-navy-700 font-bold text-md'>{category.name.toUpperCase()}</div>
              <div key={`${category.name + idx}div2`} className='flex items-center justify-center color-navy-300 text-md font-normal'>
                <span className='bg-orange-500 mx-1 radius-md'>
                  {
                    countSelectedCategories(category.name) === 0
                      ? ''
                      : countSelectedCategories(category.name) === categories[idx].values.length
                        ? (
                          <span className='text-center bg-white px-0'>
                            All
                          </span>
                        )
                        : (
                          <span className='color-white px-2 text-center'>
                            {countSelectedCategories(category.name)}
                          </span>
                        )
                  }
                </span>
              </div>
            </div>
          </AccordionHeader>
          <AccordionBody key={idx} className="flex flex-col gap-3">
            {categories[idx].values.map((value, _idx) => (
              <div key={`${value.value + _idx}div1`} className="relative flex items-center">
                <label key={`${value.value + _idx}label`} className="flex justify-start items-center font-normal color-navy-300 text-md cursor-pointer w-full">
                  <input
                    key={value.value}
                    id={value.id}
                    name={category}
                    type='checkbox'
                    value={value.value}
                    aria-describedby={value.value}
                    onClick={e => handleCategoryChange(category.name, value.value, e.target.checked)}
                    className="h-4 w-4 radius-sm border border-navy-700 color-navy-700 focus:border-navy-600 mr-3 cursor-pointer"
                  />
                  <span>{value.value}</span>
                </label>
              </div>
            ))}
          </AccordionBody>
        </Accordion>
      )))}
    </>
  );
};

const mapDispatchToProps = dispatch => ({
  onCategoryClick: category => dispatch(setMultipleCategoryValues(category)),
  onSortClick: orderBy => dispatch(setMultipleSortValues(orderBy)),
  onClearFilter: () => dispatch(setClearFilters())
});

export default connect(null, mapDispatchToProps)(Sidebar);