import React, { FunctionComponent } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { IButtonProps, IStyledProps } from '../../../common/types';

interface IProps extends IButtonProps, IStyledProps<{ image?: any }> {
  isLoudspeakerOn: boolean;

}

export const LoudspeakerButtonView: FunctionComponent<IProps> = ({
  onPress,
  isLoudspeakerOn,
  style
}) => {
  style = { ...defaultStyle, ...style };
  const iconStyle = { ...defaultStyle.image, ...style.image }
  return (
    <TouchableOpacity onPress={onPress}>
      <Icon
        name={isLoudspeakerOn ? 'volume-high' : 'volume-mute'}
        style={iconStyle}
        size={40}
        color="white"
      />
    </TouchableOpacity>
  );
};

const defaultStyle = StyleSheet.create({
  image: {
    opacity: 1,
  },
});
