import React, { FC, useEffect, useState } from "react";
import isEmpty from "lodash/isEmpty";
import cx from "classnames";
import styles from "../../products/filters/filters.module.scss";
import { PlusOutlined, MinusOutlined,DownOutlined,UpOutlined } from "@ant-design/icons";

const DirectoryStructure: FC<any> = ({
  files,
  handleCategorySelect,
  selectedCategory,
  type
}) => {
  
  const path = [];
  const [expanded, setExpanded] = useState<number[]>([]);
  const handleExpandClick = (id: number) => {
    setExpanded([...expanded, id]);
  };
  const handleCollapseClick = (id: number) => {
    const filteredExpanded = [...expanded].filter((cId: number) => cId !== id);
    setExpanded(filteredExpanded);
  };
  // useEffect(() => {
  //   const _selectedCategory: number = +selectedCategory;
  //   const exp = [];
  //   exp.push(_selectedCategory)
  //   setExpanded(exp);
  // },[selectedCategory])
  // useEffect(() => {
  //   console.log(expanded,files,"______________________")
  // },[expanded])
 
  
  return (
    <>
      {files.name!==null?type&&files.parent_id===1?null:<div className={styles.directoryFilterDiv}>
        <div
          className={
            !isEmpty(selectedCategory) && selectedCategory === files.category_id
              ? cx("font-extrabold text-lg")
              : files.parent_id === null
              ? cx(
                  "font-semibold text-base mb-1 mt-2 ml-1 cursor-pointer",
                  styles.categoryHeader
                )
              : cx(" ml-4 mb-1 cursor-pointer", styles.subCategories)
          } 
          style={{fontSize:"14px"}}
          onClick={() => handleCategorySelect(files.category_id,files.name,files)}
        >
          {files.name }
        </div>
        <div>
          {files.children && files.children.length > 0 && !expanded.includes(files.category_id) ? (
            // <PlusOutlined
             
            // />
            // <DownCircleOutlined  />
            <DownOutlined  onClick={() => handleExpandClick(files.category_id)}
            className={styles.iconDisplay}/>
          ) : null}
          {files.children && files.children.length > 0 && expanded.includes(files.category_id) ? (
            // <MinusOutlined
              
            // />
            <UpOutlined onClick={() => handleCollapseClick(files.category_id)}
            className={styles.iconDisplay}/>
            // <UpCircleOutlined />
          ) : null}
        </div>
      </div>:null}
      <div
        style={{ paddingLeft: "0.5rem" }}
        className={styles.directoryFilterChildDiv}
      >
        {files.children &&
        (expanded.includes(files.category_id) ||
          (!isEmpty(selectedCategory) && selectedCategory !== "All"))
          ? files.children.map((item: any) => (
              <DirectoryStructure
                files={item}
                key={item.category_id}
                handleCategorySelect={handleCategorySelect}
              />
            ))
          : null}
      </div>
    </>
  );
};
export default DirectoryStructure;