import React, {useState} from "react";

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

//actions

//components
import AsideHeadChatSettingsCallTest from "./AsideHeadChatSettingsCallTest";
import SettingsList, {buildMenuItem} from "./_component/SettingsList";
import {MdOutlinePhoneInTalk, MdOutlineSurroundSound, MdOutlineVolumeUp} from "react-icons/md";

//styling

//statics

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

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

  const [isCallTest, setIsCallTest] = useState(false);

  const menuItems = [
    buildMenuItem(keys.RING_TONE_SOUND, texts[keys.RING_TONE_SOUND], CALL[keys.RING_TONE_SOUND], MdOutlinePhoneInTalk),
    buildMenuItem(keys.CALL_TONE_SOUND, texts[keys.CALL_TONE_SOUND], CALL[keys.CALL_TONE_SOUND], MdOutlineVolumeUp),
    buildMenuItem(keys.CALL_TEST, texts[keys.CALL_TEST], null, MdOutlineSurroundSound, () => null),
  ];

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

  return isCallTest ? <AsideHeadChatSettingsCallTest/> : <SettingsList menuItems={menuItems} setSettings={setSetting}/>;
}