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

export type LLAlertWidgetDetailStyles = {
  container: ViewStyle;
  text: TextStyle;
  image: ImageStyle;
};

export type LLAlertWidgetDetailProps =
  ComponentStyleProp<LLAlertWidgetDetailStyles> & {
    text?: string;
    imageUrl?: string;
  };

export function LLAlertWidgetDetail({
  text,
  imageUrl,
  styles: stylesProp,
}: LLAlertWidgetDetailProps) {
  const styles = useStyles({
    componentStylesFn: getAlertWidgetDetailStyles,
    stylesProp,
  });
  return (
    <View style={styles.container}>
      {!!text && <LLText style={styles.text}>{text}</LLText>}
      {!!imageUrl && (
        <Image
          source={{ uri: imageUrl }}
          style={styles.image}
          resizeMode="contain"
        />
      )}
    </View>
  );
}

const getAlertWidgetDetailStyles: LLComponentStyleFn<
  LLAlertWidgetDetailStyles
> = ({ theme }) =>
  StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
    },
    text: {
      flex: 2,
      fontSize: 12,
      color: theme.text,
    },
    image: {
      flex: 1,
      maxWidth: 100,
      height: 70,
    },
  });