/** Loading skeleton blocks with pulse animation. */
import React, {useEffect, useRef} from 'react';
import {Animated, StyleSheet, View, ViewStyle} from 'react-native';
import {COLORS} from '../theme/colors';
import {RADIUS} from '../theme/spacing';

export function Skeleton({width = '100%', height = 16, style, circle}: {
  width?: number | `${number}%`;
  height?: number;
  style?: ViewStyle;
  circle?: boolean;
}): React.JSX.Element {
  const pulse = useRef(new Animated.Value(0.35)).current;
  useEffect(() => {
    const loop = Animated.loop(
      Animated.sequence([
        Animated.timing(pulse, {toValue: 1, duration: 620, useNativeDriver: true}),
        Animated.timing(pulse, {toValue: 0.35, duration: 620, useNativeDriver: true}),
      ]),
    );
    loop.start();
    return () => loop.stop();
  }, [pulse]);

  return (
    <Animated.View
      style={[
        styles.block,
        {width, height, opacity: pulse, borderRadius: circle ? 999 : RADIUS.s},
        style,
      ]}
    />
  );
}

export function RoomCardSkeleton(): React.JSX.Element {
  return (
    <View style={{width: 190, marginRight: 12}}>
      <Skeleton width={'100%'} height={128} style={{borderRadius: 24}} />
      <Skeleton width={120} height={12} style={{marginTop: 8}} />
      <Skeleton width={80} height={10} style={{marginTop: 6}} />
    </View>
  );
}

const styles = StyleSheet.create({
  block: {backgroundColor: COLORS.cardBgLight},
});