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

export type LLWidgetSponsorStyles = {
  container: ViewStyle;
  sponsorText: TextStyle;
  sponsorImage: ImageStyle;
};

export type LLWidgetSponsorProps = ComponentStyleProp<LLWidgetSponsorStyles> & {
  widgetId: string;
};

export function LLWidgetSponsor({
  widgetId,
  styles: stylesProp,
}: LLWidgetSponsorProps) {
  const widgetSponsorStyles = useStyles({
    componentStylesFn: getWidgetSponsorStyles,
    stylesProp,
  });
  const widgetSponsors = useWidgetSponsors({ widgetId });
  const widgetSponsor = widgetSponsors?.[0];
  if (!widgetSponsor) {
    return undefined;
  }
  return (
    <View style={widgetSponsorStyles.container}>
      <LLText style={widgetSponsorStyles.sponsorText}>Sponsored by</LLText>
      <Image
        accessibilityLabel={widgetSponsor.name}
        source={{ uri: widgetSponsor.logo_url }}
        style={widgetSponsorStyles.sponsorImage}
        resizeMode="contain"
      ></Image>
    </View>
  );
}

const getWidgetSponsorStyles: LLComponentStyleFn<LLWidgetSponsorStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    container: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 12,
    },
    sponsorText: {
      fontSize: 10,
      color: theme.text,
    },
    sponsorImage: {
      width: 60,
      height: 40,
      marginHorizontal: 12,
    },
  });