import control from "../../images/icons/control.svg";
import "../sidebar/toolbar.css";
import { useState } from "react";
import controlOff from "../../images/icons/control.svg";

export const PopupUserControlButton: React.FC<any> = ({
  isAdmin,
  user,
  sendControlRequest,
  localUser,
  handleControl,
  setNotification,
  handleReturnControl,
}) => {
  const [show, setShow] = useState(false);
  const isUserAdmin = isAdmin(user);

  function onChangeControl() {
    handleControl(user.id);
    setShow(false);
    setNotification(false);
  }

  return (
    <div>
      {!show ? (
        <>
          {" "}
          {isUserAdmin ? (
            <>
              {user.control ? (
                <button
                  onClick={() => handleReturnControl()}
                  className="control-button"
                >
                  <img
                    alt="icon"
                    src={control}
                    className="control-button-icon"
                  ></img>
                  <span className="constrol-button-title">
                    Вернуть управление
                  </span>
                </button>
              ) : (
                <button
                  onClick={() => setShow((prev) => !prev)}
                  className="control-button"
                >
                  <img
                    alt="icon"
                    src={control}
                    className="control-button-icon"
                  ></img>
                  <span className="constrol-button-title">
                    Передать управление
                  </span>
                </button>
              )}
            </>
          ) : (
            <>
              {user.admin ? (
                <>
                  {!user.control ? (
                    <button
                      onClick={() => handleReturnControl()}
                      className="control-button"
                    >
                      <img
                        alt="icon"
                        src={control}
                        className="control-button-icon"
                      ></img>
                      <span className="constrol-button-title">
                        Вернуть управление
                      </span>
                    </button>
                  ) : (
                    <button
                      onClick={() => sendControlRequest(localUser)}
                      className="control-button"
                    >
                      <img
                        alt="icon"
                        src={control}
                        className="control-button-icon"
                      ></img>
                      <span className="constrol-button-title">
                        Запросить управление
                      </span>
                    </button>
                  )}
                </>
              ) : (
                <div className="empty__block"></div>
              )}
            </>
          )}
        </>
      ) : (
        <div className="toolbar-confirm-block">
          {" "}
          <button
            onClick={() => setShow((prev) => !prev)}
            className="toolbar-button no medium"
          >
            <div className="toolbar-button-medium-view">
              <img className="" src={controlOff}></img>
              <span className="toolbar-button-medium-view-title">Нет</span>
            </div>
          </button>
          <button
            onClick={onChangeControl}
            className="toolbar-button yes medium"
          >
            <div className="toolbar-button-medium-view">
              <img className="" src={control}></img>
              <span className="toolbar-button-medium-view-title">Да</span>
            </div>
          </button>
        </div>
      )}
    </div>
  );
};
