/* eslint-disable no-unused-vars */
import React, { Component, useState, useEffect } from "react";
import SystemMessageWidget from "../Widgets/SystemMessageWidget";
import { GetSystemMessages } from "../../Services/system-messages-service";

const SystemMessageContainer = (props) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    GetSystemMessages().then((res) => {
      res &&
        setData(
          res.result.map((r) => {
            return {
              id: r.id,
              notifIcon: r.icon_svg,
              notifMessage: r.message,
              linkSrc: r.link,
              linkText: r.link_text,
            };
          })
        );
    });
  }, []);

  return (
    <React.Fragment>
      <div className="message-widget">
        {data &&
          data.map((r) => {
            return (
              <SystemMessageWidget
                data={r}
                onToggleSettings={props.onToggleSettings}
                onToggleNotification={props.onToggleNotification}
              />
            );
          })}
        </div>
    </React.Fragment>
  );
};

export default SystemMessageContainer;