import { CSSProperties } from "@theia/core/shared/react";
import * as React from "react";
import { createUseStyles } from "react-jss";
import { EScreenView } from "../../constants";
import { useStorjWidgetContext } from "../StorjWidget/StorjWidget.context";
import { useCommonStyles } from "../StorjWidget/StorjWidget.style";

const useStyles = createUseStyles({
  backAction: {
    cursor: (props: any) => (props.disabled ? "not-allowed" : "pointer"),
    "&:hover": {
      textDecoration: (props: any) => (props.disabled ? "none" : "underline"),
    },
    opacity: (props: any) => (props.disabled ? "30%" : "100%"),
  },
});
type Props = {
  onClick?: Function;
  disabled?: boolean;
  style?: CSSProperties;
  hideHomeIcon?: boolean;
};
function BackButton(props: Props) {
  const { onClick, disabled, style, hideHomeIcon } = props;
  const { setPreviousScreen, setCurrentScreen } = useStorjWidgetContext();
  const handleClickBack = () => {
    if (!onClick) {
      setPreviousScreen();
    } else {
      onClick();
    }
  };
  const handleClickHome = () => {
    setCurrentScreen(EScreenView.ACTIONS_SCREEN);
  };
  const classes = useStyles({ disabled });
  const commonClasses = useCommonStyles();
  return (
    <>
      <i
        onClick={handleClickBack}
        style={style}
        className={`fa fa-chevron-left ${classes.backAction}`}
      />
      {!hideHomeIcon && (
        <i
          className={`${commonClasses.linkAction} fa fa-home`}
          style={{ marginLeft: 16, marginRight: "auto", fontSize: 18 }}
          onClick={handleClickHome}
        />
      )}
    </>
  );
}

export default BackButton;