import React, { Component } from "react";
import { View, ImageBackground } from "react-native";
import { connect } from "react-redux";
import Config from "../config";
import { Spinner } from "./Spinner";
import { LINEGREY, getMainBrandingColourFromState } from "../colours";
class ProfilePic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: null,
      imageBorderRadius: 18,
      imageUploading: false,
      backgroundFill: false
    };
  }
  UNSAFE_componentWillMount() {
    this.setState({
      image: this.props.ProfilePic != null ? this.props.ProfilePic : Config.env.defaultProfileImage,
      imageDiameterStyle: {
        height: this.props.Diameter != null ? this.props.Diameter : 35,
        width: this.props.Diameter != null ? this.props.Diameter : 35
      },
      imageBorderRadius: this.props.Diameter != null ? this.props.Diameter / 2 : 18,
      imageUploading: this.props.ImageUploading,
      backgroundFill: this.props.ProfilePic === Config.env.tinyChatDefault
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    let profPic = null;
    if (nextProps.ProfilePic) {
      profPic = nextProps.ProfilePic;
    }
    this.setState({
      image: profPic,
      imageUploading: nextProps.ImageUploading
    });
  }
  renderImage() {
    if (this.state.imageUploading) {
      return /*#__PURE__*/React.createElement(Spinner, {
        style: {
          backgroundColor: "white",
          borderRadius: this.state.imageBorderRadius
        }
      });
    }
    let image = Config.env.defaultProfileImage;
    let isDefault = true;
    if (this.state.image !== null && typeof this.state.image === "string") {
      if (this.state.image !== "https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg" && this.state.image !== "https://plusscdn.azureedge.net/uploads/23046-1/636675694526742825882defaultavatar.jpg" && this.state.image !== "https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg" && this.state.image !== "https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:e2dc6a8b-61e8-4a76-a7ea-b1a15a013b94/public/2b3df48c4394a03840e52db886/profilepic.jpg") {
        image = {
          uri: this.state.image
        };
        isDefault = false;
      }
    }
    return /*#__PURE__*/React.createElement(ImageBackground, {
      key: "default",
      source: image,
      style: [styles.profilePicImage, {
        borderRadius: this.state.imageBorderRadius
      }, (isDefault || this.state.backgroundFill) && {
        backgroundColor: this.props.colourBrandingMain
      }],
      imageStyle: {
        borderRadius: this.state.imageBorderRadius
      }
    }, this.props.children);
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.profilePicOuter, this.state.imageDiameterStyle, this.props.bordered && styles.bordered, {
        borderRadius: this.state.imageBorderRadius
      }, this.props.style],
      key: this.props.id
    }, this.renderImage());
  }
}
const styles = {
  profilePicOuter: {
    height: 35,
    width: 35,
    zIndex: 1,
    backgroundColor: LINEGREY
    //  overflow: 'hidden'
  },
  profilePicImage: {
    flex: 1,
    height: null,
    width: null
  },
  bordered: {
    borderWidth: 1,
    borderColor: "#fff"
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const profilePic = connect(mapStateToProps, {})(ProfilePic);
export { profilePic as ProfilePic };
//# sourceMappingURL=ProfilePic.js.map