import React from 'react';
import {
  StyleSheet,
  ViewStyle,
  TextStyle,
  TouchableHighlight,
} from 'react-native';
import { useStyles, useTheme } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLWidgetSubmitButtonStyles = {
  buttonContainer: ViewStyle;
  disabledButtonContainer: ViewStyle;
  buttonText: TextStyle;
  disabledButtonText: TextStyle;
};

export type LLWidgetSubmitButtonProps =
  ComponentStyleProp<LLWidgetSubmitButtonStyles> & {
    widgetId: string;
  };

export type LLWidgetSubmitButtonComponentProps =
  ComponentStyleProp<LLWidgetSubmitButtonStyles> & {
    disabled?: boolean;
    label?: string;
    onPress: () => void;
  };

export function LLWidgetSubmitButtonComponent({
  disabled,
  onPress,
  label = 'Submit',
  styles: stylesProp,
}: LLWidgetSubmitButtonComponentProps) {
  const submitButtonStyles = useStyles({
    componentStylesFn: getWidgetSubmitButtonStyles,
    stylesProp,
  });
  const { theme } = useTheme();

  return (
    <TouchableHighlight
      disabled={disabled}
      onPress={onPress}
      style={[
        submitButtonStyles.buttonContainer,
        disabled && submitButtonStyles.disabledButtonContainer,
      ]}
      underlayColor={theme.primaryPressedButtonBackground}
      activeOpacity={1}
    >
      <LLText
        style={[
          submitButtonStyles.buttonText,
          disabled && submitButtonStyles.disabledButtonText,
        ]}
      >
        {label}
      </LLText>
    </TouchableHighlight>
  );
}

const getWidgetSubmitButtonStyles: LLComponentStyleFn<
  LLWidgetSubmitButtonStyles
> = ({ theme }) =>
  StyleSheet.create({
    buttonContainer: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      width: 78,
      height: 32,
      borderRadius: 4,
      marginLeft: 16,
      marginBottom: 16,
      backgroundColor: theme.primaryButtonBackground,
    },
    disabledButtonContainer: {
      backgroundColor: theme.disabledButtonBackground,
    },
    buttonText: {
      fontSize: 14,
    },
    disabledButtonText: {
      color: theme.disabledButtonText,
    },
  });