import React from 'react';
import { Dimensions, Image } from 'react-native';
import { SBox } from '../s-components/layout/s-box';

type TProps = {
  indicatorOffsetTop?: number;
  indicatorLight?: boolean;
};

export const RefreshIndicator: React.FC<TProps> = props => {
  const { indicatorLight, indicatorOffsetTop } = props;
  const indicatorUrl = indicatorLight
    ? // eslint-disable-next-line
      require('../../../assets/bars-white.gif')
    : // eslint-disable-next-line
      require('../../../assets/bars.gif');

  return (
    <SBox
      position="absolute"
      width={Dimensions.get('window').width}
      height={60}
      top={indicatorOffsetTop! - 60}
      alignItems="center"
      justifyContent="center"
    >
      <Image style={{ width: 23, height: 22 }} source={indicatorUrl} />
    </SBox>
  );
};

RefreshIndicator.defaultProps = {
  indicatorOffsetTop: 0,
};