import React from "react";

//strings
import strings from "../constants/localization";
import {CHAT_SETTING_KEYS} from "../constants/chatSettings";

//components
import SettingsList, {buildMenuItem} from "./_component/SettingsList";
import {
  MdOutlineNotificationsOff,
  MdOutlinePhoneDisabled, MdOutlineEditNotifications, MdOutlineNotificationsActive
} from "react-icons/md";

//styling

//statics

export default function ({chatSettings, dispatchSettings}) {
  const {NOTIFICATIONS} = chatSettings;

  const keys = CHAT_SETTING_KEYS.NOTIFICATIONS;
  const texts = strings.chatSettings[keys.MAIN];

  const menuItems = [
    buildMenuItem(keys.MUTE, texts[keys.MUTE], NOTIFICATIONS.MUTE, MdOutlineNotificationsOff),
    buildMenuItem(keys.MUTE_INCOMING_CALL, texts[keys.MUTE_INCOMING_CALL], NOTIFICATIONS.MUTE_INCOMING_CALL, MdOutlinePhoneDisabled),
    buildMenuItem(keys.SHOW_TEXT, texts[keys.SHOW_TEXT], NOTIFICATIONS.SHOW_TEXT, MdOutlineEditNotifications),
    buildMenuItem(keys.SOUND, texts[keys.SOUND], NOTIFICATIONS.SOUND, MdOutlineNotificationsActive),
  ];

  function setSetting(type) {
    const purifiedChatSettings = {...chatSettings};
    const item = menuItems.find(e => e.type === type);
    const nextValue = !item.value;
    purifiedChatSettings[keys.MAIN][type] = nextValue;
    dispatchSettings(purifiedChatSettings)
  }

  return <SettingsList menuItems={menuItems} setSettings={setSetting}/>
}