//@ts-nocheck
import React from 'react';
import {
  Dimensions,
  Image,
  Linking,
  SafeAreaView,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  B1,
  B2,
  B3,
  B4,
  B5,
  B6,
  CallBlack,
  Close2Icon,
} from '../../assets/icons';
import { MText } from '../../components/MText';
import { useNavigation } from '@react-navigation/native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 1,
    icon: <B1 />,
    img: require('../../assets/img/b1.png'),
  },
  {
    key: 2,
    icon: <B2 />,
    img: require('../../assets/img/b2.png'),
  },
  {
    key: 3,
    icon: <B3 />,
    img: require('../../assets/img/b3.png'),
  },
  {
    key: 4,
    icon: <B4 />,
    img: require('../../assets/img/b4.png'),
  },
  {
    key: 5,
    icon: <B5 />,
    img: require('../../assets/img/b5.png'),
  },
  {
    key: 6,
    icon: <B6 />,
    img: require('../../assets/img/b6.png'),
  },
];

export default function Guideline() {
  const navigation = useNavigation();
  const _renderItem = ({ item }) => {
    return (
      <View key={item?.key}>
        <View style={{ alignItems: 'center' }}>
          <Image
            source={item?.img}
            style={{
              width: Dimensions.get('screen').width,
              height: Dimensions.get('window').height * 0.8,
              resizeMode: 'contain',
            }}
          />
        </View>
      </View>
    );
  };
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: 'white',
      }}
    >
      <View
        style={{
          paddingVertical: 16,
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={{
            position: 'absolute',
            left: 0,
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Close2Icon />
        </TouchableOpacity>
        <MText style={{ fontWeight: 'bold', fontSize: 16 }}>Hướng dẫn</MText>
        <TouchableOpacity
          onPress={() => {
            Linking.openURL(`tel:1900633688`);
          }}
          style={{
            position: 'absolute',
            right: 10,
            width: 32,
            height: 32,
            alignItems: 'center',
            justifyContent: 'center',
            borderWidth: 1,
            borderRadius: 30,
            borderColor: '#BDBDBD',
          }}
        >
          <CallBlack />
        </TouchableOpacity>
      </View>
      <View
        style={{
          height: 2,
          backgroundColor: '#E0E0E0',
        }}
      />
      <AppIntroSlider
        renderItem={_renderItem}
        data={slides}
        activeDotStyle={{
          backgroundColor: '#E40010',
          width: 30,
          height: 6,
        }}
        dotStyle={{ width: 20, backgroundColor: '#E0E0E0', height: 6 }}
        showNextButton={false}
        showPrevButton={false}
        showSkipButton={false}
        showDoneButton={false}
      />
    </SafeAreaView>
  );
}
