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

export type LLWidgetHeaderDismissIconStyles = {
  container: ViewStyle;
  imageContainer: ViewStyle;
  image: ImageStyle;
};

export type LLWidgetHeaderDismissIconProps =
  ComponentStyleProp<LLWidgetHeaderDismissIconStyles> & {
    onDismiss?: () => void;
  };

export function LLWidgetHeaderDismissIcon({
  onDismiss,
  styles: stylesProp,
}: LLWidgetHeaderDismissIconProps) {
  const { themeAssets } = useTheme();
  const styles = useStyles({
    componentStylesFn: getDismissIconStyles,
    stylesProp,
  });
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => onDismiss?.()}
        style={styles.imageContainer}
      >
        <Image source={themeAssets.close} style={styles.image}></Image>
      </TouchableOpacity>
    </View>
  );
}

const getDismissIconStyles: LLComponentStyleFn<LLWidgetHeaderDismissIconStyles> =
  ({ theme }) =>
    StyleSheet.create({
      container: {
        display: 'flex',
        flex: 1,
        height: '100%',
      },
      imageContainer: {
        justifyContent: 'flex-start',
        alignSelf: 'flex-end',
      },
      image: {
        width: 16,
        height: 16,
      },
    });