import { Tooltip } from "@mui/material";
import axios from "axios";
import React, { useContext } from "react";
import { getRoleFromUrl } from "../../utils/getRoleFromUrl";
import { useSelector } from "react-redux";
import "./styles.css";
import { AppContext } from "../../contexts/AppContext";

export const ExcelLink = ({ link, text, fontSize, role, token, fColor }) => {
  const authToken = useSelector((state) => state.userSlice.authToken);
  const [openNotif] = useContext(AppContext);

  return (
    <>
      {" "}
      {getRoleFromUrl() === "ProvinceOperator" ||
      getRoleFromUrl() === "SuperAdmin" ? (
        <Tooltip title={`جهت دانلود کلید کنید `} placement="top">
          <a
            onClick={() => {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "فایل اکسل در حال دانلود می باشد، این علمیات ممکن است زمان بر باشد لطفا صبر کنید.",
                severity: "success",
              });
            }}
            className="cell"
            style={{
              textDecoration: "none",
              fontSize: fontSize ? fontSize : "12px",
              color: fColor ? fColor : "white",
            }}
            href={
              link
                ? `${axios.defaults.baseURL}${link}${
                    role ? `&role=${getRoleFromUrl()}` : ""
                  }${token ? `&token=${authToken}` : ""}`
                : "#"
            }
          >
            {text}
          </a>
        </Tooltip>
      ) : (
        <span
          style={{
            textDecoration: "none",
            fontSize: fontSize ? fontSize : "12px",
            color: fColor ? fColor : "white",
          }}
        >
          {text}
        </span>
      )}
    </>
  );
};
