import React from 'react';
import {
  Pressable,
  ViewStyle,
  StyleSheet,
  ActivityIndicator,
  Image,
  ImageStyle,
} from 'react-native';
import { useStyles, useTheme } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';

export type LLComposerSendButtonStyles = {
  buttonContainer: ViewStyle;
  icon: ImageStyle;
};

export type LLComposerSendButtonProps =
  ComponentStyleProp<LLComposerSendButtonStyles> & {
    onPress: () => void;
    isSendingMessage: boolean;
    disabled?: boolean;
  };

export function LLComposerSendButton({
  onPress,
  disabled,
  styles: stylesProp,
  isSendingMessage,
}: LLComposerSendButtonProps) {
  const { themeAssets } = useTheme();
  const composerButtonStyles = useStyles({
    componentStylesFn: getComposerButtonStyles({ disabled }),
    stylesProp,
  });
  return (
    <Pressable
      onPress={onPress}
      accessibilityLabel="Send Message"
      disabled={disabled}
      style={composerButtonStyles.buttonContainer}
    >
      {isSendingMessage ? (
        <ActivityIndicator size="small" color="white" />
      ) : (
        <Image style={composerButtonStyles.icon} source={themeAssets.send} />
      )}
    </Pressable>
  );
}

const getComposerButtonStyles: (
  props: Pick<LLComposerSendButtonProps, 'disabled'>
) => LLComponentStyleFn<LLComposerSendButtonStyles> =
  (props) =>
  ({ theme }) =>
    StyleSheet.create({
      buttonContainer: {
        height: 45,
        width: 45,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        marginLeft: 5,
        backgroundColor: theme.primaryButtonBackground,
        opacity: props.disabled ? 0.5 : 1,
      },
      icon: {
        height: 18,
        width: 18,
      },
    });