import React, {useState} from 'react';
import Carousel, {Pagination} from 'react-native-snap-carousel';
import {useNavigation, StackActions} from '@react-navigation/native';
import LinearGradient from 'react-native-linear-gradient';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
import Button from '@components/Button';
import {ONBOARDING} from '@constants/navigation/onboarding';
import {setAppIntroductionDone} from '@services/AppIntroduction';
import {carouselItems} from '@screens/app-introduction/data';
import THEME from '@styles/theme';
import {
  Gradient,
  Container,
  Wrapper,
  Title,
  Description,
  CarouselItem,
  DotStyle,
  InActiveDotStyle,
  Image,
  CarouselContainerStyle,
  ButtonWrapper,
} from '@styles/screens/app-introduction';

const AppIntroduction = () => {
  const navigation = useNavigation();
  const [activeIndex, setActiveIndex] = useState(0);

  // eslint-disable-next-line react/no-unstable-nested-components
  const _renderItem = ({item}: any) => (
    <CarouselItem>
      <Title>{item.title}</Title>
      <Description>{item.text}</Description>
      <Image source={item.source} />
    </CarouselItem>
  );

  return (
    <LinearGradient
      colors={[
        THEME?.SECONDARY.DARK,
        THEME?.SECONDARY.DARK,
        THEME?.PRIMARY?.MAIN,
      ]}
      style={Gradient}>
      <Container>
        <Wrapper testID="strtCrsl">
          <Carousel
            data={carouselItems}
            removeClippedSubviews={true}
            loopClonesPerSide={carouselItems?.length}
            enableMomentum={true}
            decelerationRate={0.9}
            sliderWidth={wp(100)}
            itemWidth={wp(100)}
            slideStyle={{width: wp(100)}}
            renderItem={_renderItem}
            onSnapToItem={index => setActiveIndex(index)}
            containerCustomStyle={CarouselContainerStyle}
            contentContainerCustomStyle={CarouselContainerStyle}
            inactiveSlideOpacity={1}
            inactiveSlideScale={1}
          />
          <Pagination
            dotsLength={carouselItems.length}
            activeDotIndex={activeIndex}
            dotStyle={DotStyle}
            inactiveDotStyle={InActiveDotStyle}
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.8}
          />
        </Wrapper>

        <ButtonWrapper>
          <Button
            title="Get Started"
            testID="gtStrt"
            onPress={async () => {
              await setAppIntroductionDone();
              navigation.dispatch(StackActions.replace(ONBOARDING?.STACK));
            }}
          />
        </ButtonWrapper>
      </Container>
    </LinearGradient>
  );
};

export default AppIntroduction;