import * as React from 'react';
import {StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';

type ToggleButtonProps = {
  toggleState: boolean;
  handleToggle: Function;
  buttonType: string;
};

const ToggleButton: React.FC<ToggleButtonProps> = ({
  toggleState,
  handleToggle,
  buttonType,
}) => {
  const buttonColor = toggleState
    ? styles.buttonColorToggled
    : styles.buttonColor;
  const textColor = toggleState ? styles.textColorToggled : styles.textColor;
  return (
    <TouchableOpacity
      style={[styles.button, buttonColor]}
      onPress={() => handleToggle()}>
      <Text style={[styles.text, textColor]}>
        {getToggleButtonText(buttonType, toggleState)}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.25,
    height: SCREEN_WIDTH * 0.1,
    borderColor: TAGG_TEXT_LIGHT_BLUE,
    borderWidth: 3,
    marginRight: '2%',
  },
  text: {
    fontWeight: 'bold',
  },
  buttonColor: {
    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
  },
  textColor: {color: 'white'},
  buttonColorToggled: {backgroundColor: 'white'},
  textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
});
export default ToggleButton;