import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import IconButton from "../../components/IconButton/IconButton";
import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
import {
  selectCategories,
  selectChildParentRelations,
} from "../../store/selectors/categoriesSelector";
import table from "../../assets/images/table.png";
import { FILES_PAGE } from "../../constants/pages";
import FileTable from "./FileTable";
import { useParams } from "react-router-dom";

const FilesPage = ({ history }) => {
  const categories = useSelector(selectCategories);
  const childParentRelations = useSelector(selectChildParentRelations);
  const dispatch = useDispatch();
  const [trigger, setTrigger] = useState(0);
  let { id } = useParams();

  useEffect(() => {
    if (id === undefined) {
      dispatch(setCategoriesReq(undefined));
    } else {
      dispatch(setCategoriesReq({ parentCategoryId: id }));
    }
  }, [id]);

  const getNameHandler = (name) => {
    if (name.length > 15) return name.substr(0, 15) + "...";
    return name;
  };

  return (
    <>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      <div
        className="pl-144"
        style={{ paddingTop: "36px" }}
        onClick={() => {
          setTrigger((trigger) => trigger + 1);
        }}
      >
        <div style={{ marginBottom: "50px" }}>
          <div style={{ marginBottom: "30px" }}>
            <h1 className="page-heading">Folderi</h1>
            <div className="page-navigation-buttons">
              <IconButton
                className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
                onClick={() => history.push({ pathname: FILES_PAGE })}
              >
                <p>Root</p>
              </IconButton>
              {childParentRelations.map((relation) => (
                <IconButton
                  className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
                  key={relation.id}
                  onClick={() => history.push({ pathname: relation.id })}
                >
                  <p>{relation.name}</p>
                </IconButton>
              ))}
            </div>
          </div>
          <div className="files-page-categories">
            {categories &&
              categories.map((category) => (
                <div
                  className="files-page-categories-category"
                  key={category.id}
                >
                  <IconButton
                    className="c-btn c-btn--primary-outlined files-page-category-button"
                    data-testid="pattern-details-send-email"
                    onClick={() =>
                      history.push({
                        pathname: FILES_PAGE + "/" + category.id,
                      })
                    }
                  >
                    <img
                      style={{
                        marginRight: "5px",
                        width: "12px",
                        height: "12px",
                      }}
                      src={table}
                    />
                    {getNameHandler(category.name)}
                  </IconButton>
                </div>
              ))}
          </div>
        </div>

        <div style={{ marginBottom: "50px" }}>
          <div style={{ marginBottom: "30px" }}>
            <h1 className="page-heading">Fajlovi</h1>
          </div>
          <div className="files-page-categories">
            <FileTable trigger={trigger} />
          </div>
        </div>
      </div>
    </>
  );
};

FilesPage.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
};

export default FilesPage;