import React from 'react';
import { LLWidgetHeader } from '../LLWidgetHeader';
import { useWidgetInteractiveTimeout } from '../../hooks';
import { LLCoreWidget } from '../LLCoreWidget';
import { LLBaseWidgetProps } from '../LLBaseWidgetProps';
import { WidgetKind } from '@livelike/javascript';
import { LLAlertWidgetBody, LLAlertWidgetBodyProps } from './LLAlertWidgetBody';
import { LLWidgetSponsor, LLWidgetSponsorProps } from '../LLWidgetFooter';

export type LLAlertWidgetProps = Omit<LLBaseWidgetProps, 'widgetKind'> & {
  onLinkPress?: (arg: { url: string }) => void;
  BodyComponent?: typeof LLAlertWidgetBody;
  BodyComponentStyles?: LLAlertWidgetBodyProps['styles'];
  SponsorComponent?: typeof LLWidgetSponsor;
  SponsorComponentStyles?: LLWidgetSponsorProps['styles'];
};

export function LLAlertWidget({
  programId,
  widgetId,
  onDismiss: onDismissProp,
  interactiveTimeout: interactiveTimeoutProp,
  onInteractiveTimeout: onInteractiveTimeoutProp,
  onLinkPress,
  WidgetComponent = LLCoreWidget,
  HeaderComponent = LLWidgetHeader,
  BodyComponent = LLAlertWidgetBody,
  SponsorComponent = LLWidgetSponsor,
  WidgetComponentStyles,
  HeaderComponentStyles,
  BodyComponentStyles,
  SponsorComponentStyles,
}: LLAlertWidgetProps) {
  const { interactiveTimeout, onInteractiveTimeout } =
    useWidgetInteractiveTimeout({
      widgetId,
      interactiveTimeout: interactiveTimeoutProp,
      onInteractiveTimeout: onInteractiveTimeoutProp,
    });

  return (
    <WidgetComponent
      widgetId={widgetId}
      widgetKind={WidgetKind.ALERT}
      programId={programId}
      onDismiss={onDismissProp}
      styles={WidgetComponentStyles}
    >
      {({ widget, onDismiss }) => (
        <>
          <HeaderComponent
            title={widget.title}
            interactiveTimeout={interactiveTimeout}
            onInteractiveTimeout={onInteractiveTimeout}
            onDismiss={onDismiss}
            dismissable={!!onDismissProp}
            styles={HeaderComponentStyles}
          />
          <BodyComponent
            widgetId={widgetId}
            styles={BodyComponentStyles}
            onLinkPress={onLinkPress}
          />
          <SponsorComponent
            widgetId={widgetId}
            styles={SponsorComponentStyles}
          />
        </>
      )}
    </WidgetComponent>
  );
}