import React from 'react';
import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import {
  LLWidgetInteractiveTimer,
  LLWidgetInteractiveTimerProps,
} from './LLWidgetInteractiveTimer';
import {
  LLWidgetHeaderDismissIcon,
  LLWidgetHeaderDismissIconProps,
} from './LLWidgetHeaderDismissIcon';
import { LLText } from '../LLText';

export type LLWidgetHeaderStyles = {
  headerContainer: ViewStyle;
  headerSubContainer: ViewStyle;
  title: TextStyle;
};

export type LLWidgetHeaderProps = ComponentStyleProp<LLWidgetHeaderStyles> &
  Omit<LLWidgetInteractiveTimerProps, 'styles'> & {
    title?: string;
    dismissable?: boolean;
    onDismiss?: () => void;
    WidgetInteractiveTimerComponent?: typeof LLWidgetInteractiveTimer;
    WidgetInteractiveTimerComponentStyles?: LLWidgetInteractiveTimerProps['styles'];
    DismissIconComponent?: typeof LLWidgetHeaderDismissIcon;
    DismissIconComponentStyles?: LLWidgetHeaderDismissIconProps['styles'];
  };

export function LLWidgetHeader({
  title,
  onDismiss,
  dismissable,
  interactiveTimeout,
  onInteractiveTimeout,
  styles: stylesProp,
  WidgetInteractiveTimerComponent = LLWidgetInteractiveTimer,
  DismissIconComponent = LLWidgetHeaderDismissIcon,
  WidgetInteractiveTimerComponentStyles,
  DismissIconComponentStyles,
}: LLWidgetHeaderProps) {
  const headerStyles = useStyles({
    componentStylesFn: getWidgetHeaderStyles,
    stylesProp,
  });
  return (
    <View style={headerStyles.headerContainer}>
      <WidgetInteractiveTimerComponent
        interactiveTimeout={interactiveTimeout}
        onInteractiveTimeout={onInteractiveTimeout}
        styles={WidgetInteractiveTimerComponentStyles}
      />
      <View style={headerStyles.headerSubContainer}>
        {!!title && (
          <LLText
            style={[
              { maxWidth: dismissable ? '90%' : '100%' },
              headerStyles.title,
            ]}
          >
            {title}
          </LLText>
        )}
        {dismissable && (
          <DismissIconComponent
            onDismiss={onDismiss}
            styles={DismissIconComponentStyles}
          />
        )}
      </View>
    </View>
  );
}

const getWidgetHeaderStyles: LLComponentStyleFn<LLWidgetHeaderStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    headerContainer: {
      display: 'flex',
      paddingVertical: 12,
      paddingHorizontal: 16,
      position: 'relative',
    },
    headerSubContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    title: {
      fontSize: 14,
      color: theme.text,
    },
  });