import React from 'react';
import { Text, TextStyle, ViewStyle } from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { Header } from '../common/Header';
import { IStyledProps } from '../common/types';
import { ForwardCalls } from './ForwardCallsView';
import { NomadicView } from './NomadicView';
interface ITelephonySettingsProps
  extends IStyledProps<ITelephonySettingsStyleProps> { }
interface ITelephonySettingsStyleProps {
  headerBgColor?: ViewStyle;
  headerTitle?: TextStyle;
  icon?: any;
}

export const TelephonySettings: React.FunctionComponent<ITelephonySettingsProps> = ({
  style,
}) => {
  const mergedStyle = { ...defaultStyle, ...style };
  const renderCenterHeader = () => {
    return <Text style={mergedStyle.headerTitle}>{Strings.menuTelephonySettings} </Text>;
  }

  return (
    <>
      <Header centerComponent={renderCenterHeader} />
      <NomadicView />
      <ForwardCalls />
    </>
  );
};

const defaultStyle: ITelephonySettingsStyleProps = {
  headerTitle: {
    fontSize: 16,
    color: 'white',
    alignSelf: 'center',
  },
  headerBgColor: {
    backgroundColor: '#0086CF',
  },
};