text: /*eslint-disable*/
  import React, { Component } from "react";
  // nodejs library to set properties for components
  import PropTypes from "prop-types";
  // nodejs library that concatenates classes
  import classnames from "classnames";
  
  import imagine1 from "assets/img/sidebar-1.jpg";
  import imagine2 from "assets/img/sidebar-2.jpg";
  import imagine3 from "assets/img/sidebar-3.jpg";
  import imagine4 from "assets/img/sidebar-4.jpg";
  
  import Button from "components/CustomButtons/Button.js";
  
  export default function FixedPlugin(props) {
    const [classes, setClasses] = React.useState("dropdown show");
    const [bg_checked, setBg_checked] = React.useState(true);
    const [bgImage, setBgImage] = React.useState(props.bgImage);
    const handleClick = () => {
      props.handleFixedClick();
    };
    return (
      <div
        className={classnames("fixed-plugin", {
          "rtl-fixed-plugin": props.rtlActive,
        })}
      >
        <div id="fixedPluginClasses" className={props.fixedClasses}>
          <div onClick={handleClick}>
            <i className="fa fa-cog fa-2x" />
          </div>
          <ul className="dropdown-menu">
            <li className="header-title">SIDEBAR FILTERS</li>
            <li className="adjustments-line">
              <a className="switch-trigger">
                <div>
                  <span
                    className={
                      props.bgColor === "white"
                        ? "badge filter badge-white active"
                        : "badge filter badge-white"
                    }
                    data-color="white"
                    onClick={() => {
                      props.handleColorClick("white");
                    }}
                  />
                  <span
                    className={
                      props.bgColor === "purple"
                        ? "badge filter badge-purple active"
                        : "badge filter badge-purple"
                    }
                    data-color="purple"
                    onClick={() => {
                      props.handleColorClick("purple");
                    }}
                  />
                  <span
                    className={
                      props.bgColor === "blue"
                        ? "badge filter badge-blue active"
                        : "badge filter badge-blue"
                    }
                    data-color="blue"
                    onClick={() => {
                      props.handleColorClick("blue");
                    }}
                  />
                  <span
                    className={
                      props.bgColor === "green"
                        ? "badge filter badge-green active"
                        : "badge filter badge-green"
                    }
                    data-color="green"
                    onClick={() => {
                      props.handleColorClick("green");
                    }}
                  />
                  <span
                    className={
                      props.bgColor === "red"
                        ? "badge filter badge-red active"
                        : "badge filter badge-red"
                    }
                    data-color="red"
                    onClick={() => {
                      props.handleColorClick("red");
                    }}
                  />
                  <span
                    className={
                      props.bgColor === "orange"
                        ? "badge filter badge-orange active"
                        : "badge filter badge-orange"
                    }
                    data-color="orange"
                    onClick={() => {
                      props.handleColorClick("orange");
                    }}
                  />
                </div>
              </a>
            </li>
            <li className="header-title">Images</li>
            <li className={bgImage === imagine1 ? "active" : ""}>
              <a
                className="img-holder switch-trigger"
                onClick={() => {
                  setBgImage(imagine1);
                  props.handleImageClick(imagine1);
                }}
              >
                <img src={imagine1} alt="..." />
              </a>
            </li>
            <li className={bgImage === imagine2 ? "active" : ""}>
              <a
                className="img-holder switch-trigger"
                onClick={() => {
                  setBgImage(imagine2);
                  props.handleImageClick(imagine2);
                }}
              >
                <img src={imagine2} alt="..." />
              </a>
            </li>
            <li className={bgImage === imagine3 ? "active" : ""}>
              <a
                className="img-holder switch-trigger"
                onClick={() => {
                  setBgImage(imagine3);
                  props.handleImageClick(imagine3);
                }}
              >
                <img src={imagine3} alt="..." />
              </a>
            </li>
            <li className={bgImage === imagine4 ? "active" : ""}>
              <a
                className="img-holder switch-trigger"
                onClick={() => {
                  setBgImage(imagine4);
                  props.handleImageClick(imagine4);
                }}
              >
                <img src={imagine4} alt="..." />
              </a>
            </li>
  
            <li className="button-container">
              <div className="button-container">
                <Button
                  color="success"
                  href=""
                  target="_blank"
                  fullWidth
                >
                  Resume
                </Button>
              </div>
            </li>
            <li className="button-container">
              <div className="button-container">
                <Button
                  color="warning"
                  href="https://github.com/akash-arelli"
                  target="_blank"
                  fullWidth
                >
                  GitHub
                </Button>
              </div>
            </li>
            <li className="button-container">
              <Button
                color="info"
                fullWidth
                href="https://www.linkedin.com/in/akash-arelli-2199a81a2/"
                target="_blank"
              >
                LinkedIn
              </Button>
            </li>
            <li className="adjustments-line" />
          </ul>
        </div>
      </div>
    );
  }
  
  FixedPlugin.propTypes = {
    bgImage: PropTypes.string,
    handleFixedClick: PropTypes.func,
    rtlActive: PropTypes.bool,
    fixedClasses: PropTypes.string,
    bgColor: PropTypes.oneOf([
      "white",
      "purple",
      "blue",
      "green",
      "orange",
      "red",
    ]),
    handleColorClick: PropTypes.func,
    handleImageClick: PropTypes.func,
  };
  