import { useSelector } from "react-redux";
import { motion } from "framer-motion";
import "./feeder.css";

function FeederStatus(props) {
  const feeder = useSelector((state) => state.feeder);
  const rightFeeder = feeder.rightFeeder;
  const leftFeeder = feeder.leftFeeder;
  return (
    <motion.div
      className="feeder"
      style={{
        position: "absolute",
        bottom: "56px",
        left: "740px",
        width: "400px",
        height: "128px",
        zIndex: "-1",
        display: "flex",
        gap: "8px",
        paddingTop: "12px",
        justifyContent: "center",
        ...props.style,
      }}
      animate={{
        opacity: [0, 0, 0, 0.6, 1],
        transition: { duration: 0.3, delay: 2 },
      }}
    >
      <span
        style={{
          position: "absolute",
          color: "#6be1e1",
          top: "-32px",
          left: "20px",
          fontSize: "22px",
        }}
      >
        1#投料{" "}
        <b
          style={{
            fontWeight: 400,
            color:
              leftFeeder == "故障"
                ? "#f83a35"
                : leftFeeder == "运行"
                ? "#9af72b"
                : "#ccc",
          }}
        >
          {leftFeeder}
        </b>
      </span>
      <span
        style={{
          position: "absolute",
          color: "#6be1e1",
          top: "-32px",
          left: "230px",
          fontSize: "22px",
        }}
      >
        2#投料{" "}
        <b
          style={{
            fontWeight: 400,
            color:
              rightFeeder == "故障"
                ? "#f83a35"
                : rightFeeder == "运行"
                ? "#9af72b"
                : "#ccc",
          }}
        >
          {rightFeeder}
        </b>
      </span>
      <span
        className={`
        feeder ${
          leftFeeder == "运行"
            ? "feeder-running"
            : leftFeeder == "故障"
            ? "feeder-error"
            : "feeder-stop"
        }
        `}
      ></span>
      <span
        className={`
          feeder ${
            rightFeeder == "运行"
              ? "feeder-running"
              : rightFeeder == "故障"
              ? "feeder-error"
              : "feeder-stop"
          }
          `}
      ></span>
    </motion.div>
  );
}

export default FeederStatus;