Untitled

/** @format */

import React from "react";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { selectToken } from "../../../../redux/_user/userSelectors";
import { useTranslation } from "react-i18next";
import { handleBlockcastPrivacySettings } from "../../../../redux/_blockcast/blockcastSlice";
import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
import { AiFillCaretDown } from "react-icons/ai";
import CommonHeader from "../../../../components/Headers/CommonHeader";
import { errorAlert, successAlert } from "../../../../redux/_alert/alertSlice";
import {
  BlockcastFeed,
  GroupChatBlockcast,
  MessageTimeBlockcast,
  OnlineStatusBlockcast,
} from "../../../../Assets/icons";

const BlockcastPrivacy = ({ group, setOpenSettings }) => {
  const { t } = useTranslation(["common"]);
  const token = useSelector(selectToken);
  const { id } = useParams();
  const dispatch = useDispatch();
  const [feedView, setFeedView] = React.useState("all");
  const [msgChannel, setMsgChannel] = React.useState("all");
  const [msgBlockcast, setMsgBlockcast] = React.useState("all");
  const [onlineStatus, setOnlineStatus] = React.useState("all");
  const [msgTime, setMsgTime] = React.useState(0);

  React.useEffect(() => {
    if (group) {
      setFeedView(group.feed_view);
      setMsgChannel(group.msg_channel);
      setMsgBlockcast(group.msg_blockcast);
      setOnlineStatus(group.online_status);
      setMsgTime(group.msg_time);
    }
  }, []);

  // *** Handle update group policy
  const handlePrivacySettings = React.useCallback(
    async ({ name, value }) => {
      try {
        if (name === "feed_view") {
          setFeedView(value);
        } else if (name === "msg_channel") {
          setMsgChannel(value);
        } else if (name === "msg_blockcast") {
          setMsgBlockcast(value);
        } else if (name === "online_status") {
          setOnlineStatus(value);
        } else {
          setMsgTime(value);
        }
        await dispatch(
          handleBlockcastPrivacySettings({ id, token, name, value })
        );
        dispatch(successAlert("Privacy settings updated successfully."));
      } catch (error) {
        dispatch(errorAlert(error.message));
        setFeedView(group?.feed_view || "all");
        setMsgChannel(group?.msg_channel || "all");
        setMsgBlockcast(group?.msg_blockcast || "all");
        setOnlineStatus(group?.online_status || "all");
        setMsgTime(group?.msg_time || 0);
      }
    },
    [dispatch, group, id, token]
  );

  const handleCloseMenu = () => {
    setOpenSettings(false);
  };
  return (
    <>
      <CommonHeader goBack={handleCloseMenu} title={t("Blockcast Privacy")} />

      <div className="block_cast_settings_page">
        <h3 className="prvacy_settings_header">
          {t("Message privacy settings")}
        </h3>

        {/* Who can see your blockcast feed */}
        <div className="privacy_box">
          <div className="blockcast_privacy_section">
            <div className="privacy_header_box">
              <BlockcastFeed style={{ fill: "var(--more-strongText-color)" }} />
              <span className="privacy_box_title">{t("blockcast_feed")}</span>
              <br />
              <span className="privacy_box_description">
                {t("Only selected user can see your blockcast feed.")}
              </span>
            </div>

            <Menu
              menuButton={
                <MenuButton className={"__privacy_settings_menu_btn "}>
                  <span>
                    <>
                      {feedView === "all" ? (
                        <>{t("Everyone")}</>
                      ) : (
                        <>
                          {feedView === "none" ? (
                            <>{t("None")}</>
                          ) : (
                            <>
                              {feedView === "mem" ? (
                                <>{t("Members")}</>
                              ) : (
                                <>{t("Choose")}</>
                              )}
                            </>
                          )}
                        </>
                      )}
                    </>
                  </span>

                  <AiFillCaretDown className="menu_icon" />
                </MenuButton>
              }
            >
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "feed_view", value: "all" })
                }
              >
                {t("Everyone")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "feed_view", value: "mem" })
                }
              >
                {t("Members")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "feed_view", value: "none" })
                }
              >
                {t("None")}
              </MenuItem>
            </Menu>
          </div>
        </div>

        {/* Who can send messages in blockcast channel */}
        <div className="privacy_box">
          <div className="blockcast_privacy_section">
            <div className="privacy_header_box">
              <GroupChatBlockcast
                style={{ fill: "var(--more-strongText-color)" }}
              />
              <span className="privacy_box_title">{t("Group_chat")}</span>
              <br />
              <span className="privacy_box_description">
                {t("Only selected user can send messages in group chat.")}
              </span>
            </div>
            <Menu
              menuButton={
                <MenuButton className={"__privacy_settings_menu_btn "}>
                  <span>
                    <>
                      {msgChannel === "all" ? (
                        <>{t("Everyone")}</>
                      ) : (
                        <>
                          {msgChannel === "none" ? (
                            <>{t("None")}</>
                          ) : (
                            <>
                              {msgChannel === "mem" ? (
                                <>{t("Members")}</>
                              ) : (
                                <>{t("Choose")}</>
                              )}
                            </>
                          )}
                        </>
                      )}
                    </>
                  </span>

                  <AiFillCaretDown className="menu_icon" />
                </MenuButton>
              }
            >
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_channel", value: "all" })
                }
              >
                {t("Everyone")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_channel", value: "mem" })
                }
              >
                {t("Members")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_channel", value: "none" })
                }
              >
                {t("None")}
              </MenuItem>
            </Menu>
          </div>
        </div>

        {/* Who can send private messages to blockcast? */}
        <div className="privacy_box">
          <div className="blockcast_privacy_section">
            <div className="privacy_header_box">
              <BlockcastPrivacy
                style={{ fill: "var(--more-strongText-color)" }}
              />
              <span className="privacy_box_title">
                {t("blockcast_Private_Message")}
              </span>
              <br />
              <span className="privacy_box_description">
                {t(
                  "Only selected user can send private messages to blockcast."
                )}
              </span>
            </div>

            <Menu
              menuButton={
                <MenuButton className={"__privacy_settings_menu_btn "}>
                  <span>
                    {msgBlockcast === "sub" ? (
                      <>{t("Subscribers")}</>
                    ) : (
                      <>
                        {msgBlockcast === "all" ? (
                          <>{t("Everyone")}</>
                        ) : (
                          <>
                            {msgBlockcast === "none" ? (
                              <>{t("None")}</>
                            ) : (
                              <>
                                {msgBlockcast === "mem" ? (
                                  <>{t("Members")}</>
                                ) : (
                                  <>{t("Choose")}</>
                                )}
                              </>
                            )}
                          </>
                        )}
                      </>
                    )}
                  </span>

                  <AiFillCaretDown className="menu_icon" />
                </MenuButton>
              }
            >
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_blockcast", value: "all" })
                }
              >
                {t("Everyone")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_blockcast", value: "sub" })
                }
              >
                {t("Subscribers")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_blockcast", value: "mem" })
                }
              >
                {t("Members")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({
                    name: "msg_blockcast",
                    value: "none",
                  })
                }
              >
                {t("None")}
              </MenuItem>
            </Menu>
          </div>
        </div>

        <div className="privacy_box">
          <div className="blockcast_privacy_section">
            <div className="privacy_header_box">
              <OnlineStatusBlockcast
                style={{ fill: "var(--more-strongText-color)" }}
              />
              <span className="privacy_box_title">{t("Online_status")}</span>
              <br />
              <span className="privacy_box_description">
                {t("Only selected user can see your online status.")}
              </span>
            </div>
            <Menu
              menuButton={
                <MenuButton className={"__privacy_settings_menu_btn "}>
                  <span>
                    {onlineStatus === "sub" ? (
                      <>{t("Subscribers")}</>
                    ) : (
                      <>
                        {onlineStatus === "all" ? (
                          <>{t("Everyone")}</>
                        ) : (
                          <>
                            {onlineStatus === "none" ? (
                              <>{t("None")}</>
                            ) : (
                              <>
                                {onlineStatus === "mem" ? (
                                  <>{t("Members")}</>
                                ) : (
                                  <>{t("Choose")}</>
                                )}
                              </>
                            )}
                          </>
                        )}
                      </>
                    )}
                  </span>

                  <AiFillCaretDown className="menu_icon" />
                </MenuButton>
              }
            >
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "online_status", value: "all" })
                }
              >
                {t("Everyone")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "online_status", value: "sub" })
                }
              >
                {t("Subscribers")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "online_status", value: "mem" })
                }
              >
                {t("Members")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({
                    name: "online_status",
                    value: "none",
                  })
                }
              >
                {t("None")}
              </MenuItem>
            </Menu>
          </div>
        </div>

        {/* Message send time */}
        <div className="privacy_box">
          <div className="blockcast_privacy_section">
            <div className="privacy_header_box">
              <MessageTimeBlockcast
                style={{ fill: "var(--more-strongText-color)" }}
              />
              <span className="privacy_box_title">
                {t("Message_send_time")}
              </span>
              <br />
              <span className="privacy_box_description">
                {t("User can send you message after selected time interval.")}
              </span>
            </div>
            <Menu
              menuButton={
                <MenuButton className={"__privacy_settings_menu_btn "}>
                  <span>
                    {msgTime === 1 ? (
                      <>{t("1 min")}</>
                    ) : (
                      <>
                        {msgTime === 60 ? (
                          <>{t("1 hr")}</>
                        ) : (
                          <>
                            {msgTime === 1440 ? (
                              <>{t("1 day")}</>
                            ) : (
                              <>
                                {msgTime === 0 ? (
                                  <>{t("None")}</>
                                ) : (
                                  <>{t("Choose")}</>
                                )}
                              </>
                            )}
                          </>
                        )}
                      </>
                    )}
                  </span>

                  <AiFillCaretDown className="menu_icon" />
                </MenuButton>
              }
            >
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_time", value: 1 })
                }
              >
                {t("1 min")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_time", value: 60 })
                }
              >
                {t("1 hr")}
              </MenuItem>

              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_time", value: 1440 })
                }
              >
                {t("1 day")}
              </MenuItem>
              <MenuItem
                className="_settings_menu_item"
                onClick={() =>
                  handlePrivacySettings({ name: "msg_time", value: 0 })
                }
              >
                {t("None")}
              </MenuItem>
            </Menu>
          </div>
        </div>
      </div>
    </>
  );
};

export default BlockcastPrivacy;