import React, { PureComponent } from "react";
import { TouchableOpacity, View } from "react-native";
import { Text } from "./Text";
import { TEXT_DARK, LINEGREY } from "../colours";

/* 
Props- 
    style - custom style for container
    buttonLeftStyle - custom style for left button
    buttonRightStyle - custom style for right button
    onPressSmall - callback function 
    onPressLarge - custom style for right button
*/

class FontScalePopup extends PureComponent {
  render() {
    if (!this.props.visible) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.container, this.props.style]
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: [styles.button, styles.buttonLeft, this.props.buttonLeftStyle],
      onPress: this.props.onPressSmall
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.smallText
    }, "A")), /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: [styles.button, styles.buttonRight, this.props.buttonRightStyle],
      onPress: this.props.onPressLarge
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.largeText
    }, "A")));
  }
}
const styles = {
  container: {
    flexDirection: "row",
    borderRadius: 2,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 4,
    zIndex: 10,
    backgroundColor: "#fff",
    padding: 2
  },
  button: {
    height: 50,
    width: 64,
    borderColor: LINEGREY,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonLeft: {
    borderRightWidth: 1
  },
  buttonRight: {
    borderLeftWidth: 1
  },
  smallText: {
    fontFamily: "sf-medium",
    color: TEXT_DARK,
    fontSize: 16
  },
  largeText: {
    fontFamily: "sf-medium",
    color: TEXT_DARK,
    fontSize: 24
  }
};
export { FontScalePopup };
//# sourceMappingURL=FontScalePopup.js.map