import React from 'react';
import {DimensionValue, StyleProp, View, ViewStyle} from 'react-native';
import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
import {Gradient, GradientProps} from '@components/_core';
import {windowDimensions} from '@shared/constants';
import {COLORS, SPACING, useTheme} from '@shared/theme';

import {useAnimatedValue} from '../../contexts/useAnimatedValueContext';
import {styles} from './styles';

const LINEAR_GRADIENT_START = {x: 0, y: 0};
const LINEAR_GRADIENT_END = {x: 1, y: 0};
const LINEAR_GRADIENT_COLORS: GradientProps['colors'] = [
  COLORS.grey[300],
  COLORS.grey[200],
  COLORS.grey[300],
];

const LINEAR_GRADIENT_COLORS_DARK: GradientProps['colors'] = [
  COLORS.grey.transparent['800-60'],
  COLORS.grey[600],
];

interface Props {
  width?: DimensionValue;
  height?: DimensionValue;
  rounded?: boolean;
  style?: StyleProp<ViewStyle>;
  isDark?: boolean;
}

function SkeletonItem({
  style,
  rounded,
  width = '100%',
  height = SPACING.x6,
  isDark = false,
}: Props) {
  const {isDarkMode} = useTheme();
  const isDarkModeStyle = isDarkMode || isDark;
  const animatedValue = useAnimatedValue();

  const animatedStyle = useAnimatedStyle(() => ({
    transform: animatedValue
      ? [
          {
            translateX: interpolate(
              animatedValue.value,
              [0, 1],
              [-windowDimensions.width, windowDimensions.width],
            ),
          },
        ]
      : [],
  }));

  return (
    <View
      style={[
        styles.container,
        {
          width,
          backgroundColor: isDarkModeStyle
            ? COLORS.grey[600]
            : COLORS.grey[300],
        },
        rounded && {borderRadius: windowDimensions.width},
        style,
      ]}>
      <Animated.View style={animatedStyle}>
        <Gradient
          style={[{height, width: windowDimensions.width}]}
          start={LINEAR_GRADIENT_START}
          end={LINEAR_GRADIENT_END}
          colors={
            isDarkModeStyle
              ? LINEAR_GRADIENT_COLORS_DARK
              : LINEAR_GRADIENT_COLORS
          }
        />
      </Animated.View>
    </View>
  );
}

export default SkeletonItem;
