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

const FirstStep = ({
  onNext,
  lang,
}: {
  onNext: () => void;
  lang: 'uz' | 'ru';
}) => {
  const { width: screenWidth, height: screenHeight } = useWindowDimensions();

  const texts = {
    uz: {
      title: 'CPOST',
      description:
        'Yuklarni kuzatish va yetkazib berishni endi bir joydan boshqaring.',
    },
    ru: {
      title: 'CPOST',
      description:
        'Теперь управляйте отслеживанием и доставкой грузов в одном месте.',
    },
  };
  const scale = screenWidth < 360 ? 0.95 : 0.95;

  return (
    <View style={[styles.container, { backgroundColor: '#28A7E8' }]}>
      <View
        style={[
          styles.banner,
          {
            width: screenWidth,
            height: '60%',
            borderBottomRightRadius: 40 * scale,
            borderBottomLeftRadius: 40 * scale,
          },
        ]}
      >
        <Image
          source={Banner}
          style={[
            styles.bannerImage,
            {
              width: screenWidth,
              objectFit: 'contain',
            },
          ]}
          resizeMode="cover"
        />
      </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: 8 * scale },
          ]}
          numberOfLines={4}
          ellipsizeMode="tail"
        >
          {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,
            flexDirection: 'row',
          },
        ]}
      >
        <View
          style={[
            styles.activeDot,
            { width: screenWidth * 0.1 * scale, height: 5 * scale },
          ]}
        />
        <View
          style={[
            styles.inactiveDot,
            {
              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',
  },
  banner: {
    zIndex: 20,
    backgroundColor: '#DBFFFF',
    borderBottomRightRadius: 40,
    borderBottomLeftRadius: 40,
    overflow: 'hidden',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
  },
  bannerImage: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    zIndex: -1,
    height: '100%',
  },
  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,
  },
  activeDot: {
    backgroundColor: '#fff',
    borderRadius: 20,
  },
  inactiveDot: {
    backgroundColor: 'rgba(255,255,255, 0.4)',
    borderRadius: 20,
  },
});

export default FirstStep;