import React, { memo, useContext } from 'react';
import { Dimensions } from 'react-native';
import { ContextVisibility } from '../../contexts';
import { Carousel } from '../../../common/components/carousel/carousel';
import { getKeyComposed } from '../../../common/transducers';
import { SBox } from '../../../common/s-components/layout/s-box';
import { fp as _ } from '../../../common/utils/fp';
import { Slide1 } from './slide-1';
import { Slide2 } from './slide-2';

const { width: DEVICE_WIDTH } = Dimensions.get('window');

type TProps = {};

export const Slider: React.FC<TProps> = memo(() => {
  const { visibility } = useContext(ContextVisibility);
  const isOffline = _.path('offline', visibility);
  const carouselHeight = 216;
  const itemHeight = 194;

  if (isOffline) {
    return null;
  }

  const pages = [
    { id: 'slide1', component: <Slide1 /> },
    { id: 'slide2', component: <Slide2 /> },
  ];

  return (
    <SBox height={carouselHeight} position="relative">
      <Carousel
        disabled={visibility.skeleton}
        withDots={visibility.data}
        dotsGap={-10}
        itemHeight={itemHeight}
        keyExtractor={getKeyComposed(['id'])}
        data={pages}
        renderItem={(item, i) => {
          return (
            <SBox width={DEVICE_WIDTH} height={itemHeight} key={i}>
              {pages[i!].component}
            </SBox>
          );
        }}
      />
    </SBox>
  );
});