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

export type LLThemeSwitchStyles = {
  imageContainer: ViewStyle;
  image: ImageStyle;
};

export type LLThemeSwitchProps = ComponentStyleProp<LLThemeSwitchStyles> & {
  switchIcon?: ImageProps['source'];
};

export function LLThemeSwitch({
  switchIcon,
  styles: stylesProp,
}: LLThemeSwitchProps) {
  const { themeAssets, setThemeType, themeType } = useTheme();
  const themeSwitchStyles = useStyles({
    componentStylesFn: getChatHeaderStyles,
    stylesProp,
  });
  const toggleTheme = useCallback(() => {
    const newTheme =
      themeType === LLThemeType.DARK ? LLThemeType.LIGHT : LLThemeType.DARK;
    setThemeType(newTheme);
  }, [themeType, setThemeType]);

  return (
    <TouchableOpacity
      style={themeSwitchStyles.imageContainer}
      onPress={toggleTheme}
    >
      <Image
        style={themeSwitchStyles.image}
        source={switchIcon || themeAssets.themeSwitch}
      />
    </TouchableOpacity>
  );
}

const getChatHeaderStyles: LLComponentStyleFn<LLThemeSwitchStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    imageContainer: {},
    image: {
      width: 24,
      height: 24,
    },
  });