import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import Banner from 'screens/../../assets/bootsplash/Step_2.png';
import ArrowRight from 'svg/ArrowRight';

const SecondStep = ({
  onNext,
  lang,
}: {
  onNext: () => void;
  lang: 'uz' | 'ru';
}) => {
  const texts = {
    uz: {
      title: 'Yetkazib berishni real vaqtda kuzating',
      description:
        'Har bir zakazingizning statusini kuzatib boring. Qayerda va qaysi bosqichda ekanini bilib oling.',
    },
    ru: {
      title: 'Отслеживайте доставку в режиме реального времени',
      description:
        'Следите за статусом каждого вашего заказа. Где и какой Узнайте, что находится на этапе.',
    },
  };
  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
  const scale = screenWidth < 360 ? 0.95 : 0.95;

  return (
    <View style={styles.container}>
      <View
        style={[
          styles.banner,
          {
            width: screenWidth,
            height: screenHeight * 0.6 * scale,
            borderBottomRightRadius: 40 * scale,
            borderBottomLeftRadius: 40 * scale,
          },
        ]}
      >
        <Image
          source={Banner}
          style={[
            styles.bannerImage,
            {
              width: screenWidth,
              height: '100%',
            },
          ]}
          resizeMode="contain"
        />
      </View>

      <View
        style={[
          styles.textContainer,
          {
            bottom: screenHeight * 0.22 * scale,
            width: screenWidth * 0.75,
            left: screenWidth * 0.05,
          },
        ]}
      >
        <Text style={[styles.title, { fontSize: screenWidth * 0.075 * scale }]}>
          {texts[lang].title}
        </Text>
        <Text
          style={[
            styles.text,
            { fontSize: screenWidth * 0.04 * scale, marginTop: 10 * scale },
          ]}
        >
          {texts[lang].description}
        </Text>
      </View>

      <View
        style={[
          styles.nextButtonWrapper,
          {
            bottom: screenHeight * 0.12 * scale,
            right: screenWidth * 0.05,
          },
        ]}
      >
        <TouchableOpacity
          style={[
            styles.button,
            {
              width: screenWidth * 0.15 * scale,
              height: screenWidth * 0.15 * scale,
              borderRadius: (screenWidth * 0.15 * scale) / 2,
            },
          ]}
          onPress={onNext}
          activeOpacity={0.7}
        >
          <ArrowRight width={24 * scale} height={24 * scale} />
        </TouchableOpacity>
      </View>

      <View
        style={[
          styles.paginationWrapper,
          {
            bottom: screenHeight * 0.15 * scale,
            left: screenWidth * 0.05,
          },
        ]}
      >
        <View
          style={[
            styles.inactiveDot,
            {
              width: screenWidth * 0.1 * scale,
              height: 5 * scale,
              marginLeft: 0,
            },
          ]}
        />
        <View
          style={[
            styles.activeDot,
            {
              width: screenWidth * 0.1 * scale,
              height: 5 * scale,
              marginLeft: 10 * scale,
            },
          ]}
        />
        <View
          style={[
            styles.inactiveDot,
            {
              width: screenWidth * 0.1 * scale,
              height: 5 * scale,
              marginLeft: 10 * scale,
            },
          ]}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    backgroundColor: '#28A7E8',
  },
  banner: {
    zIndex: 20,
    backgroundColor: '#DBFFFF',
    overflow: 'hidden',
  },
  bannerImage: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    zIndex: -1,
  },
  textContainer: {
    position: 'absolute',
    zIndex: 20,
  },
  title: {
    color: '#fff',
    fontWeight: '500',
  },
  text: {
    color: '#eeee',
    fontWeight: '400',
  },
  nextButtonWrapper: {
    position: 'absolute',
    zIndex: 20,
  },
  button: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  paginationWrapper: {
    position: 'absolute',
    zIndex: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  activeDot: {
    backgroundColor: '#fff',
    borderRadius: 20,
  },
  inactiveDot: {
    backgroundColor: 'rgba(255,255,255,0.4)',
    borderRadius: 20,
  },
});

export default SecondStep;