import React, { memo, useState /*, useCallback*/ } from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { /*Animated,*/ StyleSheet } from 'react-native';
import { SImage } from '../s-components/s-image';
import { SBox } from '../s-components/layout/s-box';
// import { SBoxAnimated } from '../s-components/layout/s-box-animated';

type TProps = {
  height: number;
  width: number;
  imageUrl: string;
  colors?: string[];
  locations?: number[] | null;
  bgColors?: string[];
  bgLocations?: number[] | null;
};

export const Image: React.FC<TProps> = memo(
  ({ height, width, imageUrl, colors, locations, bgColors, bgLocations }) => {
    const [imageRendered, setImageRendered] = useState(false);

    // const [animation] = useState(new Animated.Value(0));
    // const getAnimatedCss = useCallback(() => {
    //   return {
    //     opacity: animation.interpolate({
    //       // animate from 0 to height difference
    //       inputRange: [0, 1],
    //       // in case 0 = max in case DIFF = min
    //       outputRange: [0, 1],
    //       extrapolate: 'clamp',
    //     }),
    //   };
    // }, []);

    return (
      <SBox height={height} width={width}>
        {bgColors ? (
          <LinearGradient
            colors={bgColors}
            locations={bgLocations}
            style={StyleSheet.absoluteFill}
          />
        ) : null}
        {imageUrl ? (
          <>
            <SImage
              height={height}
              width={width}
              resizeMethod="resize"
              source={{ uri: imageUrl }}
              onLoad={() => {
                setImageRendered(true);
                // Animated.timing(animation, {
                //   toValue: 1,
                //   useNativeDriver: true,
                //   duration: 100,
                // }).start();
              }}
            />
            {imageRendered && colors ? (
              // <SBoxAnimated style={[StyleSheet.absoluteFill, getAnimatedCss()]}>
              <LinearGradient
                colors={colors}
                locations={locations}
                style={[StyleSheet.absoluteFill]}
              />
            ) : // </SBoxAnimated>
            null}
          </>
        ) : null}
      </SBox>
    );
  }
);