import { TouchableOpacity, Text, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';

import React, { ComponentType } from 'react';

import { useTheme } from './ThemeContext';

export type ButtonProps = {
  readonly active?: boolean;
  readonly onPress?: () => void;
  readonly text: string;
  readonly width?: number;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
};

const Button: ComponentType<ButtonProps> = ({
  text,
  onPress,
  active = false,
  width,
  wrapperStyle = {},
}: ButtonProps) => {
  const theme = useTheme();

  const wrapperWidth: StyleProp<ViewStyle> = width ? { flexBasis: width } : {};

  return (
    <View style={StyleSheet.flatten([theme.buttonGroup.wrapper, wrapperStyle, wrapperWidth])}>
      <TouchableOpacity
        onPress={onPress}
        style={StyleSheet.flatten([
          theme.buttonGroup.button,
          active ? theme.buttonGroup.activeButton : theme.buttonGroup.inactiveButton,
        ])}
      >
        <Text
          style={StyleSheet.flatten([
            theme.buttonGroup.text,
            active ? theme.buttonGroup.activeText : theme.buttonGroup.inactiveText,
          ])}
        >
          {text}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

type ButtonGroupProps = { readonly children: React.ReactNode };

const ButtonGroup: ComponentType<ButtonGroupProps> = ({ children }: ButtonGroupProps) => {
  const theme = useTheme();

  return <View style={theme.buttonGroup.group}>{children}</View>;
};

const CompoundButtonGroup = ButtonGroup as typeof ButtonGroup & {
  Button: typeof Button;
};

CompoundButtonGroup.Button = Button;

export default CompoundButtonGroup;