import React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import {
  LLWidgetActionInfo,
  LLWidgetActionInfoProps,
} from './LLWidgetActionInfo';
import { LLWidgetSponsor, LLWidgetSponsorProps } from './LLWidgetSponsor';

export type LLWidgetFooterStyles = {
  container: ViewStyle;
};

export type LLWidgetFooterProps = ComponentStyleProp<LLWidgetFooterStyles> & {
  widgetId: string;
  ActionInfoComponent?: typeof LLWidgetActionInfo;
  ActionInfoComponentStyles?: LLWidgetActionInfoProps['styles'];
  SponsorComponent?: typeof LLWidgetSponsor;
  SponsorComponentStyles?: LLWidgetSponsorProps['styles'];
};

export function LLWidgetFooter({
  widgetId,
  styles: stylesProp,
  ActionInfoComponent = LLWidgetActionInfo,
  ActionInfoComponentStyles,
  SponsorComponent = LLWidgetSponsor,
  SponsorComponentStyles,
}: LLWidgetFooterProps) {
  const footerStyles = useStyles({
    componentStylesFn: getWidgetFooterStyles,
    stylesProp,
  });
  return (
    <View style={footerStyles.container}>
      <ActionInfoComponent
        widgetId={widgetId}
        styles={ActionInfoComponentStyles}
      />
      <SponsorComponent widgetId={widgetId} styles={SponsorComponentStyles} />
    </View>
  );
}

const getWidgetFooterStyles: LLComponentStyleFn<LLWidgetFooterStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'column',
    },
  });