import React, {memo} from 'react';
import {Image, Pressable, View} from 'react-native';
import {ImageOrVideo} from 'react-native-image-crop-picker';
import {IconPlayerPlayFilled} from '@tabler/icons-react-native';
import {useTheme} from '@shared/theme';
import {hexToRgb} from '@shared/colors';

import {styles} from './styles';
import {isImage} from '../../utils';

type PropsActiveAsset = {
  active?: ImageOrVideo;
  onPressActive: () => void;
  activeAspectRatio?: number;
  maxPreviewHeight: number;
  videoThumbs: Record<string, string>;
};

const ActiveAsset = ({
  active,
  onPressActive,
  activeAspectRatio,
  maxPreviewHeight,
  videoThumbs,
}: PropsActiveAsset) => {
  const {theme, iconSizes} = useTheme();
  const blackTransparent = hexToRgb(theme.black, 0.5);

  if (!active) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Pressable onPress={onPressActive}>
        <Image
          source={{
            uri: isImage(active) ? active.path : videoThumbs[active.path],
          }}
          style={[
            styles.image,
            {
              maxHeight: maxPreviewHeight,
              aspectRatio: activeAspectRatio || 1,
            },
          ]}
          resizeMode="contain"
        />
        {!isImage(active) ? (
          <View style={styles.playOverlayContainer}>
            <View
              style={[
                styles.playCircle,
                {
                  borderColor: theme.background.elements.default,
                  backgroundColor: blackTransparent,
                },
              ]}>
              <IconPlayerPlayFilled
                color={theme.background.elements.default}
                fill={theme.background.elements.default}
                size={iconSizes.x6}
              />
            </View>
          </View>
        ) : null}
      </Pressable>
    </View>
  );
};

export default memo(ActiveAsset);
