import { connect } from 'react-redux';
import formatNumber from 'ringcentral-integration/lib/formatNumber';
import callingModes from 'ringcentral-integration/modules/CallingSettings/callingModes';

import DialerPanel from '../../components/DialerPanel';
import withPhone from '../../lib/withPhone';

function mapToProps(_, {
  phone: {
    call,
    dialerUI,
    callingSettings,
    contactSearch,
    connectivityMonitor,
    locale,
    rateLimiter,
    webphone,
    audioSettings: {
      dialButtonVolume,
      dialButtonMuted,
    },
  }
}) {
  const isWebphoneMode = (callingSettings.callingMode === callingModes.webphone);
  const waitingWebphoneConnected = (isWebphoneMode && webphone && webphone.connecting);
  const webphoneDisconnected = (isWebphoneMode && webphone && !webphone.connected);
  return {
    currentLocale: locale.currentLocale,
    callingMode: callingSettings.callingMode,
    isWebphoneMode,
    callButtonDisabled: (
      !call.isIdle
      || !connectivityMonitor.connectivity
      || rateLimiter.throttling
      || webphoneDisconnected
    ),
    toNumber: dialerUI.toNumberField,
    recipient: dialerUI.recipient,
    searchContactList: contactSearch.sortedResult,
    fromNumbers: callingSettings.fromNumbers,
    fromNumber: callingSettings.fromNumber,
    showSpinner: !(
      call.ready &&
      callingSettings.ready &&
      locale.ready &&
      connectivityMonitor.ready &&
      (!isWebphoneMode || !webphone || !waitingWebphoneConnected)
    ),
    dialButtonVolume,
    dialButtonMuted,
  };
}

function mapToFunctions(_, {
  phone: {
    callingSettings,
    regionSettings,
    contactSearch,
    dialerUI,
  },
  phoneTypeRenderer,
}) {
  return {
    onToNumberChange: value => (
      dialerUI.setToNumberField(value)
    ),
    clearToNumber: () => dialerUI.clearToNumberField(),
    onCallButtonClick: () => {
      dialerUI.onCallButtonClick();
    },
    changeFromNumber: (...args) => callingSettings.updateFromNumber(...args),
    formatPhone: phoneNumber => formatNumber({
      phoneNumber,
      areaCode: regionSettings && regionSettings.areaCode,
      countryCode: regionSettings && regionSettings.countryCode,
    }),
    setRecipient: recipient => dialerUI.setRecipient(recipient),
    clearRecipient: () => dialerUI.clearRecipient(),
    searchContact: searchString => (
      contactSearch.debouncedSearch({ searchString })
    ),
    phoneTypeRenderer,

  };
}

const DialerPage = withPhone(connect(
  mapToProps,
  mapToFunctions,
)(DialerPanel));

export {
  mapToFunctions,
  mapToProps,
  DialerPage as default,
};

@@ -482,66 +482,10 @@
 ings
-: %7B%0A      dialButtonVolume,%0A      dialButtonMuted,%0A    %7D
 ,%0A
+
   %7D%0A
@@ -1113,16 +1113,32 @@
 actList:
+ contactSearch ?
  contact
@@ -1156,16 +1156,21 @@
 edResult
+ : %5B%5D
 ,%0A    fr
@@ -1478,29 +1478,132 @@
 lume
-,%0A    dialButtonMuted
+: audioSettings ? audioSettings.dialButtonVolume : 1,%0A    dialButtonMuted: audioSettings ? audioSettings.dialButtonMuted : 1
 ,%0A  
@@ -2386,16 +2386,17 @@
 ontact: 
+(
 searchSt
@@ -2399,21 +2399,74 @@
 chString
+)
  =%3E 
-(
+%7B%0A      if (!contactSearch) %7B%0A        return;%0A      %7D
 %0A      c
@@ -2511,22 +2511,23 @@
 tring %7D)
+;
 %0A    
-)
+%7D
 ,%0A    ph
@@ -2543,17 +2543,16 @@
 nderer,%0A
-%0A
   %7D;%0A%7D%0A%0A

make contactSearch and audioSettings optional in dialer page (#620)