"use strict";

import React, { useContext, useRef, useState } from 'react';
import { View } from 'react-native';
import styles from "./styles.js";
import { ApplicationContext } from "../Context/index.js";
import { Icon } from "../Icon/index.js";
import { Skeleton } from "../Skeleton/index.js";
import { Styles } from "../Consts/index.js";
import { Image as Component } from "../Adapters/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const Image = ({
  style,
  source,
  loading = true,
  children,
  ...rest
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const error = useRef(false);
  const [status, setStatus] = useState(loading ? 'loading' : 'success');

  /**
   * render content loading | fail | rendered
   */
  const renderContent = () => {
    if (status === 'loading' || status === 'error') {
      let content = /*#__PURE__*/_jsx(Skeleton, {});
      if (status === 'error') {
        content = /*#__PURE__*/_jsx(Icon, {
          name: "image-off-outline",
          color: theme.colors.text.disable
        });
      }
      return /*#__PURE__*/_jsx(View, {
        style: Styles.flexCenter,
        children: content
      });
    }
    return children;
  };
  return /*#__PURE__*/_jsx(Component, {
    ...rest,
    source: source,
    style: [styles.container, style],
    onProgress: () => {
      error.current = false;
      if (status !== 'loading' && loading) {
        setStatus('loading');
      }
    },
    onLoadStart: () => {
      error.current = false;
    },
    onLoadEnd: () => {
      let current = 'success';
      if (error.current) {
        current = 'error';
      }
      if (status !== current) {
        setStatus(current);
      }
    },
    onError: () => {
      error.current = true;
    },
    children: renderContent()
  });
};
export { Image };
//# sourceMappingURL=index.js.map