import React from 'react';
import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
import { useStyles, useWidget, useWidgetInteractions } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLWidgetActionInfo, LLWidgetActionInfoProps } from '../LLWidgetFooter';
import { LLTextAskWidgetSubmitButton } from './LLTextAskWidgetSubmitButton';
import { LLText } from '../LLText/LLText';

export type LLTextAskWidgetActionInfoStyles = {
  container: ViewStyle;
  confirmMessageText: TextStyle;
};

export type LLTextAskWidgetActionInfoProps =
  ComponentStyleProp<LLTextAskWidgetActionInfoStyles> &
    Omit<LLWidgetActionInfoProps, 'styles'> & {
      ActionInfoComponent?: typeof LLWidgetActionInfo;
      ActionInfoComponentStyles?: LLWidgetActionInfoProps['styles'];
    };

export function LLTextAskWidgetActionInfo({
  widgetId,
  styles: stylesProp,
  ActionInfoComponent = LLWidgetActionInfo,
  ActionInfoComponentStyles,
  ...props
}: LLTextAskWidgetActionInfoProps) {
  const styles = useStyles({
    componentStylesFn: getTextAskWidgetActionInfoStyles,
    stylesProp,
  });
  const widget = useWidget({ widgetId });
  const widgetInteractions = useWidgetInteractions({ widgetId });
  const widgetInteraction = widgetInteractions?.[0];
  return (
    <View style={styles.container}>
      <ActionInfoComponent
        {...props}
        widgetId={widgetId}
        SubmitButtonComponent={LLTextAskWidgetSubmitButton}
        styles={ActionInfoComponentStyles}
      />
      {widgetInteraction && !!widget.confirmation_message && (
        <LLText style={styles.confirmMessageText}>
          {widget.confirmation_message}
        </LLText>
      )}
    </View>
  );
}

const getTextAskWidgetActionInfoStyles: LLComponentStyleFn<
  LLTextAskWidgetActionInfoStyles
> = ({ theme }) =>
  StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
    },
    confirmMessageText: {
      paddingLeft: 16,
      fontSize: 12,
      lineHeight: 12,
      marginBottom: 8,
      color: theme.text,
    },
  });