import React from "react";
import { StyleSheet, ViewStyle } from "react-native";
import { View } from "react-native-animatable";
import { connect } from "react-redux";

const styles = StyleSheet.create({
  light: {
    backgroundColor: "rgba(0,0,0,0.1)",
  },
  dark: {
    backgroundColor: "rgba(255,255,255,0.1)",
  },
  loadingTile: {
    overflow: "hidden",
    borderRadius: 3,
  },
});

export const LoadingTile = connect(
  (state: { base: { currentTheme: string } }) => ({
    theme: state.base.currentTheme,
  })
)(({ style, theme }: { style?: ViewStyle; theme: string }) => {
  return (
    <View
      animation={{
        from: { opacity: 1 },
        to: { opacity: 0.5 },
      }}
      duration={300}
      direction="alternate"
      iterationCount={Infinity}
      style={[
        styles.loadingTile,
        theme === "dark" ? styles.dark : styles.light,
        style,
      ]}
      useNativeDriver
    />
  );
});