function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from "react";
import { View, Animated } from "react-native";
import { connect } from "react-redux";
import { getMainBrandingColourFromState } from "../colours";

/* const arr = []
for (var i = 0; i < 3; i++) {
  arr.push(i);
} */

class LoadingCircles extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      animatedSize: new Animated.Value(1),
      animatedOpacity: new Animated.Value(0),
      animatedSize2: new Animated.Value(1),
      animatedOpacity2: new Animated.Value(0),
      animatedSize3: new Animated.Value(1),
      animatedOpacity3: new Animated.Value(0),
      animatedSize4: new Animated.Value(1),
      animatedOpacity4: new Animated.Value(0),
      animatedSize5: new Animated.Value(1),
      animatedOpacity5: new Animated.Value(0)
    });
  }
  /* constructor() {
         super()
         this.state.animatedSizes = [];
         this.state.animatedOpacity = [];
         arr.forEach((value) => {
             this.state.animatedSizes[value] = new Animated.Value(1);
             this.state.animatedOpacity[value] = new Animated.Value(0);
         })
     } */

  componentDidMount() {
    this.animate();
    /* setTimeout(() => {
              this.animate2();
          }, 150);
          setTimeout(() => {
              this.animate3();
          }, 300); */
  }
  animate() {
    Animated.sequence([Animated.parallel([Animated.timing(this.state.animatedSize, {
      toValue: 20,
      duration: 900,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity, {
      toValue: 1,
      duration: 900,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize2, {
      toValue: 20,
      duration: 900,
      delay: 150,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity2, {
      toValue: 1,
      duration: 900,
      delay: 150,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize3, {
      toValue: 20,
      duration: 900,
      delay: 300,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity3, {
      toValue: 1,
      duration: 900,
      delay: 400,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize4, {
      toValue: 20,
      duration: 900,
      delay: 450,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity4, {
      toValue: 1,
      duration: 900,
      delay: 450,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize5, {
      toValue: 20,
      duration: 900,
      delay: 600,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity5, {
      toValue: 1,
      duration: 900,
      delay: 600,
      useNativeDriver: false
    })]), Animated.parallel([Animated.timing(this.state.animatedOpacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity2, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity3, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity4, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedOpacity5, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false
    })]), Animated.parallel([Animated.timing(this.state.animatedSize, {
      toValue: 1,
      duration: 1,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize2, {
      toValue: 1,
      duration: 1,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize3, {
      toValue: 1,
      duration: 1,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize4, {
      toValue: 1,
      duration: 1,
      useNativeDriver: false
    }), Animated.timing(this.state.animatedSize5, {
      toValue: 1,
      duration: 1,
      useNativeDriver: false
    })])]).start(() => {
      this.animate();
    });
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.container
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles.absolute]
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.circle, {
        borderColor: this.props.color || this.props.colourBrandingMain,
        width: this.state.animatedSize,
        height: this.state.animatedSize,
        opacity: this.state.animatedOpacity
      }]
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles.absolute]
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.circle, {
        borderColor: this.props.color || this.props.colourBrandingMain,
        width: this.state.animatedSize2,
        height: this.state.animatedSize2,
        opacity: this.state.animatedOpacity2
      }]
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles.absolute]
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.circle, {
        borderColor: this.props.color || this.props.colourBrandingMain,
        width: this.state.animatedSize3,
        height: this.state.animatedSize3,
        opacity: this.state.animatedOpacity3
      }]
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles.absolute]
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.circle, {
        borderColor: this.props.color || this.props.colourBrandingMain,
        width: this.state.animatedSize4,
        height: this.state.animatedSize4,
        opacity: this.state.animatedOpacity4
      }]
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles.absolute]
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.circle, {
        borderColor: this.props.color || this.props.colourBrandingMain,
        width: this.state.animatedSize5,
        height: this.state.animatedSize5,
        opacity: this.state.animatedOpacity5
      }]
    })));
  }
}
const styles = {
  container: {
    width: 30,
    height: 30,
    alignItems: "center",
    justifyContent: "center"
  },
  circle: {
    borderRadius: 15,
    borderWidth: 1
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const loadingCircles = connect(mapStateToProps, {})(LoadingCircles);
export { loadingCircles as LoadingCircles };
//# sourceMappingURL=LoadingCircles.js.map