import React from "react";
import { useNavigate } from "react-router-dom";
import { CardActions, IconButton } from "@mui/material";
import { NavigateNext } from '@mui/icons-material/';
import propTypes from 'prop-types';

function Widgets(props) {
  const navigate = useNavigate();
  const getBackgroundColor = (className) => {
    switch (className) {
      case "firstwidget actv-User":
        return "#84c484";
      case "secondwidget all-user":
        return "#61C4E8";
      case "thirdwidget total-usage-time":
        return "#71a6d3";
      default:
        return undefined;
    }
  };

  const renderRightDiv = (className) => {
    const isUserWidget =
      className === "secondwidget all-user" ||
      className === "firstwidget actv-User";

    const handleNavigate = () => {
      if (className === "firstwidget actv-User") {
        navigate('/users', { state: { from: "button" } });
      } else {
        navigate('/users');
      }
    };

    if (isUserWidget) {
      return (
        <div className="d-flex card-right">
          <button
            className="right"
            onClick={handleNavigate}
            style={{
              textDecoration: "none",
              fontSize: "30px",
              cursor: "pointer",
              background: "none",
              border: "none",
              textAlign: "left",
            }}
          >
            <h4>{props.number}</h4>
            <button
              onClick={handleNavigate}
              style={{
                textDecoration: "none",
                cursor: "pointer",
                background: "none",
                border: "none",
                fontSize: "16px",
                padding: 0,
              }}
            >
              <h4 style={{ fontSize: "16px" }}>{props.title}</h4>
            </button>
          </button>

          <div>
            <CardActions>
              <IconButton aria-label="more" onClick={handleNavigate}>
                <NavigateNext className="profile-action-button" />
              </IconButton>
            </CardActions>
          </div>
        </div>
      );
    }

    if (className === "thirdwidget") {
      return (
        <div className="right">
          <h4>
            <span style={{ fontSize: "30px" }}>{props.number}</span> Hours
          </h4>
          <h4>{props.title}</h4>
        </div>
      );
    }

    return (
      <div className="d-flex card-right">
        <div className="right">
          <h2>{props.number}</h2>
          <h4>{props.title}</h4>
        </div>
      </div>
    );
  };


  return (
    <div className="widget d-flex" style={props.style}>
      <div
        className="left"
        data-testid="widget-left"
        style={{
          backgroundColor: getBackgroundColor(props.className),
        }}
      >
        <img src={props.Icons} alt={props.title} className="d-flex svg-icons" />
      </div>
      {renderRightDiv(props.className)}
    </div>
  );
}

Widgets.propTypes = {
  className: propTypes.string.isRequired,
  Icons: propTypes.string.isRequired,
  number: propTypes.oneOfType([propTypes.string, propTypes.number]).isRequired,
  title: propTypes.string.isRequired,
  style: propTypes.object,
};

Widgets.defaultProps = {
  style: {},
};

export default Widgets;
