import React, { useCallback, useEffect } from 'react';
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  ViewStyle,
  ImageStyle,
} from 'react-native';
import { IGif } from '@livelike/javascript';
import {
  BasePickerData,
  LLBasePicker,
  LLBasePickerProps,
} from '../LLBasePicker';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { useGifPicker, useStyles } from '../../hooks';
import { LLGifPickerHeader, LLGifPickerHeaderProps } from './LLGifPickerHeader';

export type LLGifPickerStyles = {
  gifImage: ImageStyle;
  gifImageContainer: ViewStyle;
};

export type LLGifPickerProps = ComponentStyleProp<LLGifPickerStyles> & {
  visible?: boolean;
  onPanelOpen?: () => void;
  onPanelClose?: () => void;
  closeGifPicker?: () => void;
  onSelectGif: (gifImage: IGif) => void;
  PickerComponentStyles?: LLBasePickerProps<BasePickerData>['styles'];
  GifPickerHeaderComponentStyles?: LLGifPickerHeaderProps['styles'];
  GifPickerHeaderComponent?: typeof LLGifPickerHeader;
};

/**
 * @description Provides stock UI for the GIF picker component.
 * @param {Function} onPanelOpen - A callback function to be called when the panel opens. It is used for tracking analytics events when the component becomes visible.
 * @param {Function} onPanelClose - A callback function to be called when the panel closes. It is used for tracking analytics events when the component is unmounted as it becomes invisible.
 * @returns {JSX.Element} - Stock UI for the GIF picker.
 */
export function LLGifPicker({
  visible,
  onPanelOpen,
  onPanelClose,
  closeGifPicker,
  onSelectGif,
  styles: stylesProp,
  PickerComponentStyles,
  GifPickerHeaderComponentStyles,
  GifPickerHeaderComponent = LLGifPickerHeader,
}: LLGifPickerProps) {
  const gifPickerStyles = useStyles({
    componentStylesFn: getGifPickerStyles,
    stylesProp,
  });
  const { isLoading, gifImages, onGifSearchInputChange } = useGifPicker();

  useEffect(() => {
    onGifSearchInputChange('', { debounce: false });
  }, []);
  useEffect(() => {
    onPanelOpen?.();
    return () => {
      onPanelClose?.();
    };
  }, []);

  const renderGifPickerHeaderComponent = useCallback(() => {
    return (
      <GifPickerHeaderComponent
        onSearchInputChange={onGifSearchInputChange}
        closeGifPicker={closeGifPicker}
        styles={GifPickerHeaderComponentStyles}
      />
    );
  }, [onGifSearchInputChange, closeGifPicker]);

  const renderGifPickerItemComponent = useCallback(
    ({ item }) => {
      return (
        <>
          {item.images?.preview_gif?.url && (
            <TouchableOpacity
              style={gifPickerStyles.gifImageContainer}
              // Ignore
              onPress={() => onSelectGif(item)}
            >
              <Image
                resizeMode="contain"
                style={gifPickerStyles.gifImage}
                source={{
                  uri: item.images.preview_gif.url,
                }}
              />
            </TouchableOpacity>
          )}
        </>
      );
    },
    [gifPickerStyles, onSelectGif]
  );

  return (
    <LLBasePicker
      packItems={gifImages}
      visible={visible}
      loading={isLoading}
      PickerHeaderComponent={renderGifPickerHeaderComponent}
      PickerItemComponent={renderGifPickerItemComponent}
      styles={PickerComponentStyles}
    />
  );
}

const getGifPickerStyles: LLComponentStyleFn<LLGifPickerStyles> = ({ theme }) =>
  StyleSheet.create({
    gifImage: {
      width: 80,
      height: 80,
    },
    gifImageContainer: {
      margin: 5,
    },
  });