import React, { useCallback } from 'react';
import {
  StyleSheet,
  TextStyle,
  TouchableOpacity,
  ViewStyle,
} from 'react-native';
import { useAnalytics, useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLAlertWidgetLinkStyles = {
  container: ViewStyle;
  text: TextStyle;
};

export type LLAlertWidgetLinkProps =
  ComponentStyleProp<LLAlertWidgetLinkStyles> & {
    label: string;
    url: string;
    onLinkPress?: (arg: { url: string }) => void;
  };

export function LLAlertWidgetLink({
  label,
  url,
  onLinkPress,
  styles: stylesProp,
}: LLAlertWidgetLinkProps) {
  const styles = useStyles({
    componentStylesFn: getAlertWidgetLinkStyles,
    stylesProp,
  });
  const { trackEvent } = useAnalytics();
  const handleLinkPress = useCallback(() => {
    trackEvent('Alert Link Opened', { url });
    onLinkPress?.({ url });
  }, [url, trackEvent, onLinkPress]);
  return (
    <TouchableOpacity style={styles.container} onPress={handleLinkPress}>
      <LLText style={styles.text}>{label}</LLText>
    </TouchableOpacity>
  );
}

const getAlertWidgetLinkStyles: LLComponentStyleFn<LLAlertWidgetLinkStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    container: {
      marginTop: 10,
    },
    text: {
      fontSize: 12,
      color: theme.primaryButtonBackground,
      textDecorationLine: 'underline',
    },
  });