import { Box, Typography } from "@mui/material";
import { useSelector } from "react-redux";
import { useState, useEffect } from "react";
import { slaughterGetKillHouseLockInfoService } from "../../services/slaughter-get-kill-house-lock-info";
import lockDollarIcon from "../../../../assets/images/lock-dollar.svg";
import lockAnbarIcon from "../../../../assets/images/lock-anbar.svg";

export const SlaughterBalanceStatusButton = () => {
  const userRoles = useSelector((state) => state.userSlice.role);
  const [lockInfo, setLockInfo] = useState(null);

  const hasOnlyKillHouseRole = userRoles && userRoles.includes("KillHouse");

  useEffect(() => {
    if (hasOnlyKillHouseRole) {
      const fetchLockInfo = async () => {
        try {
          const data = await slaughterGetKillHouseLockInfoService();
          setLockInfo(data);
        } catch (error) {
          console.error("Error fetching lock info:", error);
          setLockInfo(null);
        }
      };
      fetchLockInfo();
    }
  }, [hasOnlyKillHouseRole, userRoles]);

  return (
    <Box
      sx={{
        width: { xs: "fit-content" },
        display: "flex",
        alignItems: "center",
        gap: 0.25,
        px: { xs: 1, md: 2 },
        height: { xs: "36px", md: "46px" },
        borderRadius: { xs: "8px", md: "12px" },
        cursor: "pointer",
        transition: "all 0.3s ease",
        border: "0.25px solid rgba(151, 151, 151, 0.3)",
        "&:hover": {
          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
        },
      }}
      style={{
        background:
          "linear-gradient(90deg, #FFFFFF 0%, #FFF4F4 78.85%, #FFE2E2 100%)",
      }}
    >
      {lockInfo?.wageLock && (
        <Box
          component="img"
          src={lockDollarIcon}
          alt="dollar"
          sx={{
            width: { xs: "22px", md: "30px" },
            height: { xs: "22px", md: "30px" },
            marginLeft: { xs: "8px", md: "8px" },
          }}
          title="به علت بدهی"
        />
      )}
      {lockInfo?.wareHouseLock && (
        <Box
          component="img"
          src={lockAnbarIcon}
          alt="anbar"
          sx={{
            width: { xs: "22px", md: "30px" },
            height: { xs: "22px", md: "30px" },
            marginLeft: { xs: "12px", md: "12px" },
            marginRight: { xs: "12px", md: "16px" },
          }}
          title="به علت پر بودن انبار"
        />
      )}
      <Typography
        variant="h6"
        sx={{
          color:
            lockInfo?.wageLock === true
              ? "rgba(235, 87, 87, 1)"
              : "rgba(0, 0, 0, 1)",
          fontWeight: "medium",
          fontSize: { xs: "14px", md: "18px" },
          marginLeft: { xs: "auto", sm: 0 },
        }}
      >
        {(lockInfo?.wage || 0).toLocaleString()}
      </Typography>
      <Typography
        variant="h6"
        sx={{
          color:
            lockInfo?.wageLock === true
              ? "rgba(235, 87, 87, 1)"
              : "rgba(0, 0, 0, 1)",
          fontWeight: "medium",
          fontSize: { xs: "10px", md: "12px" },
          marginLeft: "2px",
          marginTop: { xs: "1px", md: "2px" },
        }}
      >
        ریال
      </Typography>
    </Box>
  );
};
