import React, { memo, useState, useCallback } from 'react';
import {
  Dimensions,
  // ScrollView,
  StatusBar,
  // Platform,
  // Animated,
  // NativeSyntheticEvent,
  // NativeScrollEvent,
} from 'react-native';
import { Instructions } from './instructions';
import { NextButtonGroup } from './next-button-group';
import { SBox } from '../../common/s-components/layout/s-box';
import { LoadingOverlay } from '../../common/components/loading-overlay';
import UserCard from '../containers/user-card';
import LocationSettings from '../containers/location-settings';
import { fp as _ } from '../../common/utils/fp';
import {
  // getDotsOffset,
  getImageOffset,
  getChangelogCarouselTopOffset,
} from '../transducers';
import {
  SLIDE_IMAGE_HORIZONTAL_PADDING,
  SLIDE_TITLE_HORIZONTAL_PADDING,
  SLIDE_DESCRIPTION_HORIZONTAL_PADDING,
} from '../constants';
import { CarouselHeader } from './carousel-header';
import { TStepsEntity, TVariant, TSteps } from '../types';
import { Carousel } from '../../common/components/carousel/carousel';

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

type TProps = {
  complete: () => void;
  loading: boolean;
  variant: TVariant;
  entity: TStepsEntity;
};

export const CarouselWelcome: React.FC<TProps> = memo(props => {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);
  const { complete, loading, variant, entity } = props;

  const onNextClick = useCallback(() => {
    const LENGTH = _.length(entity.data!);

    if (currentStepIndex === (variant === 'onboarding' ? LENGTH : LENGTH - 1)) {
      complete();
      return;
    }
    setCurrentStepIndex(currentStepIndex + 1);
  }, [currentStepIndex]);

  const onClose = () => {
    complete();
  };

  const goToBeginning = () => {
    setCurrentStepIndex(0);
  };

  const carouselContainerTopOffset =
    variant === 'changelog'
      ? getChangelogCarouselTopOffset(DEVICE_HEIGHT)
      : getImageOffset(DEVICE_HEIGHT);

  const dotsPosition = variant === 'onboarding' ? -54 : -127;

  // no loading in entity
  if (loading || _.path('loading', entity)) {
    return <LoadingOverlay />;
  }

  return (
    <SBox width={1} flex={1} bg="ebonyClay">
      <StatusBar barStyle="light-content" translucent />
      {currentStepIndex !== _.length(entity.data!) ? (
        <SBox flex={1} width={1} mt={carouselContainerTopOffset}>
          {variant === 'changelog' ? (
            <CarouselHeader
              onClose={onClose}
              entity={entity}
              currentStepIndex={currentStepIndex}
            />
          ) : null}
          {currentStepIndex < _.length(entity.data!) ? (
            <Carousel
              externalIndex={currentStepIndex}
              withDots
              dotsGap={dotsPosition}
              itemHeight={DEVICE_HEIGHT}
              data={_.path('data', entity) as TSteps}
              keyExtractor={item => item.id}
              onScrollCallback={(index: number) => {
                setCurrentStepIndex(index);
              }}
              renderItem={(item, index) => {
                return (
                  <Instructions
                    variant={variant}
                    // eslint-disable-next-line react/no-array-index-key
                    key={index}
                    width={DEVICE_WIDTH}
                    titleWidth={DEVICE_WIDTH - SLIDE_TITLE_HORIZONTAL_PADDING}
                    descriptionWidth={
                      DEVICE_WIDTH - SLIDE_DESCRIPTION_HORIZONTAL_PADDING
                    }
                    // currentStepIndex={index}
                    data={item}
                  />
                );
              }}
            />
          ) : null}
        </SBox>
      ) : null}
      {variant === 'onboarding' &&
      currentStepIndex === _.length(entity.data!) ? (
        <SBox alignItems="center" flex={1} width={1}>
          <UserCard onBackPress={goToBeginning} />
          <LocationSettings
            width={DEVICE_WIDTH - SLIDE_IMAGE_HORIZONTAL_PADDING}
          />
        </SBox>
      ) : null}
      <NextButtonGroup
        onNextClick={onNextClick}
        btnText={_.pathOr(
          variant === 'onboarding' ? 'start' : 'next',
          [currentStepIndex, 'btnText'],
          entity.data
        )}
        // variant={variant}
      />
    </SBox>
  );
});