import React, { ComponentType } from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import {
  LLEndWidgetUIPhaseLabel,
  LLEndWidgetUIPhaseLabelProps,
} from './LLEndWidgetUIPhaseLabel';
import { LLWidgetRewards, LLWidgetRewardsProps } from './LLWidgetRewards';
import { LLWidgetSubmitButtonProps } from './LLWidgetSubmitButtonComponent';

export type LLWidgetActionInfoStyles = {
  container: ViewStyle;
};

export type LLWidgetActionInfoProps =
  ComponentStyleProp<LLWidgetActionInfoStyles> & {
    widgetId: string;
    EndWidgetUIPhaseLabelComponent?: typeof LLEndWidgetUIPhaseLabel;
    EndWidgetUIPhaseLabelComponentStyles?: LLEndWidgetUIPhaseLabelProps['styles'];
    SubmitButtonComponent?: ComponentType<LLWidgetSubmitButtonProps>;
    SubmitButtonComponentStyles?: LLWidgetSubmitButtonProps['styles'];
    WidgetRewardsComponent?: typeof LLWidgetRewards;
    WidgetRewardsComponentStyles?: LLWidgetRewardsProps['styles'];
  };

export function LLWidgetActionInfo({
  widgetId,
  SubmitButtonComponent,
  SubmitButtonComponentStyles,
  EndWidgetUIPhaseLabelComponent = LLEndWidgetUIPhaseLabel,
  EndWidgetUIPhaseLabelComponentStyles,
  WidgetRewardsComponent = LLWidgetRewards,
  WidgetRewardsComponentStyles,
  styles: stylesProp,
}: LLWidgetActionInfoProps) {
  const actionInfoStyles = useStyles({
    componentStylesFn: getWidgetActionInfoStyles,
    stylesProp,
  });

  return (
    <View style={actionInfoStyles.container}>
      <EndWidgetUIPhaseLabelComponent
        widgetId={widgetId}
        styles={EndWidgetUIPhaseLabelComponentStyles}
      />
      {SubmitButtonComponent && (
        <SubmitButtonComponent
          widgetId={widgetId}
          styles={SubmitButtonComponentStyles}
        />
      )}
      <WidgetRewardsComponent
        widgetId={widgetId}
        styles={WidgetRewardsComponentStyles}
      />
    </View>
  );
}

const getWidgetActionInfoStyles: LLComponentStyleFn<LLWidgetActionInfoStyles> =
  ({ theme }) =>
    StyleSheet.create({
      container: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
      },
    });