//@ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
import {
  CIMBBank,
  IconBack,
  IconNational1,
  IconNational2,
  IconNational3,
  IconNationalCard,
  Selfie,
  TimaSmall,
} from '../../assets/icons';
import appStore from '../../AppStore';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { color } from '../../theme';
import { commonStyles } from '../CommonStyles';
import homeStore from '../home/Store';
import AppIntroSlider from 'react-native-app-intro-slider';
import LinearGradient from 'react-native-linear-gradient';
import MHeader from '../../components/MHeader';

const slides = [
  {
    key: 1,
    title: 'B1: NHẬN DIỆN GIẤY TỜ TÙY THÂN',
    description: 'Bạn vui lòng chụp ảnh\nCMND/ CCCD theo hướng dẫn:',
    text: 'Description.\nSay something cool',
    backgroundColor: '#59b2ab',
    icon: <IconNationalCard />,
    h1: 'Nên đặt CCCD/ CMND lên mặt phẳng để chụp',
    h2: 'Đặt CCCD/ CMND nằm gọn trong khung hình\n(Không quá nhỏ hay quá to làm mất chi tiết)',
    h3: 'Chọn nơi ánh sáng tốt, tránh lóa/ chói hình chụp',
    img: true,
  },
  {
    key: 2,
    title: 'B2: XÁC THỰC KHUÔN MẶT',
    description: 'Bạn vui lòng chụp ảnh\nkhuôn mặt theo hướng dẫn:',
    text: 'Other cool stuff',
    backgroundColor: '#febe29',
    icon: <Selfie />,
    h1: 'Giữ điện thoại ổn định, thẳng mặt',
    h2: 'Điều chỉnh khuôn mặt nằm gọn trong vòng tròn',
    h3: 'Thực hiện quay trái, phải theo hướng dẫn để\nhoàn thành xác thực khuôn mặt',
  },
];

export const Introduction = observer(function Introduction(props: any) {
  const navigation = useNavigation();
  const loan = props.route?.params?.loan;

  const _renderItem = ({ item }) => {
    return (
      <View style={{ marginBottom: 50 }}>
        <View
          style={{
            borderRadius: 8,
            borderWidth: 0.5,
            borderColor: '#E0E0E0',
            marginTop: 16,
            padding: 16,
            margin: 16,
          }}
        >
          <MText
            style={{
              color: '#F05123',
              textAlign: 'center',
              fontSize: 16,
              fontWeight: 'bold',
              marginTop: 16,
            }}
          >
            {item.title}
          </MText>
          <View style={{ alignItems: 'center', marginTop: 16 }}>
            {item.icon}
          </View>
          <MText
            style={{
              color: '#333333',
              textAlign: 'center',
              fontSize: 16,
              fontWeight: '600',
              marginTop: 16,
            }}
          >
            {item?.description}
          </MText>
          <View
            style={{
              flexDirection: 'row',
              marginTop: 16,
              alignItems: 'center',
            }}
          >
            <TimaSmall />
            <MText style={{ color: '#333333', marginLeft: 8, fontSize: 12 }}>
              {item?.h1}
            </MText>
          </View>
          <View style={{ flexDirection: 'row', marginTop: 8 }}>
            <TimaSmall style={{ marginTop: 5 }} />
            <MText style={{ color: '#333333', marginLeft: 8, fontSize: 12 }}>
              {item?.h2}
            </MText>
          </View>
          <View
            style={{ flexDirection: 'row', marginTop: 8, alignItems: 'center' }}
          >
            <TimaSmall />
            <MText style={{ color: '#333333', marginLeft: 8, fontSize: 12 }}>
              {item?.h3}
            </MText>
          </View>
          {item.img && (
            <View
              style={{
                flexDirection: 'row',
                marginTop: 16,
                justifyContent: 'space-between',
                paddingHorizontal: 16,
              }}
            >
              <View>
                <IconNational1 />
                <MText
                  style={{
                    fontSize: 12,
                    textAlign: 'center',
                    color: '#333333',
                    marginTop: 5,
                  }}
                >
                  Không chụp{'\n'}quá mờ
                </MText>
              </View>
              <View>
                <IconNational2 />
                <MText
                  style={{
                    fontSize: 12,
                    textAlign: 'center',
                    color: '#333333',
                    marginTop: 5,
                  }}
                >
                  Không chụp{'\n'}mất góc
                </MText>
              </View>
              <View>
                <IconNational3 />
                <MText
                  style={{
                    fontSize: 12,
                    textAlign: 'center',
                    color: '#333333',
                    marginTop: 5,
                  }}
                >
                  Không chụp{'\n'}loá sáng
                </MText>
              </View>
            </View>
          )}
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <MHeader title="Chuẩn bị hồ sơ" onBack={() => navigation.goBack()} />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flexDirection: 'row',
            borderWidth: 1,
            borderColor: '#EF4123',
            borderRadius: 30,
            marginHorizontal: 16,
            marginTop: 8,
          }}
        >
          <LinearGradient
            colors={['#FF7A00', '#EF4123']}
            style={{
              flex: 1,
              alignItems: 'center',
              borderRadius: 30,
              paddingVertical: 12,
            }}
          >
            <MText style={{ color: '#FFFFFF' }}>Xác thực thông tin</MText>
          </LinearGradient>
          <View style={{ flex: 1, alignItems: 'center', paddingVertical: 12 }}>
            <MText style={{ color: '#333333' }}>Cập nhật thông tin</MText>
          </View>
        </View>
        <ScrollView style={{ flex: 1 }}>
          <AppIntroSlider
            renderItem={_renderItem}
            data={slides}
            activeDotStyle={{
              backgroundColor: '#F36D21',
              width: 30,
              height: 6,
            }}
            dotStyle={{ width: 20, backgroundColor: '#E0E0E0', height: 6 }}
            showNextButton={false}
            showPrevButton={false}
            showSkipButton={false}
            showDoneButton={false}
          />
        </ScrollView>
        <TouchableOpacity
          onPress={() => {
            navigation.dispatch(
              StackActions.push(ScreenNames.NationalID, { loan, reLoan: true })
            );
          }}
        >
          <LinearGradient
            colors={['#FF7A00', '#EF4123']}
            style={{
              marginTop: 20,
              alignItems: 'center',
              borderRadius: 30,
              height: 40,
              justifyContent: 'center',
              marginHorizontal: 16,
            }}
          >
            <MText style={[commonStyles.textNormalBold, { color: '#FFFFFF' }]}>
              Bắt đầu
            </MText>
          </LinearGradient>
        </TouchableOpacity>
        <View
          style={{
            marginBottom: 24,
            marginTop: 8,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <MText style={{ fontSize: 12, color: '#333333' }}>
            Cung cấp bởi{' '}
          </MText>
          <CIMBBank />
        </View>
      </SafeAreaView>
    </View>
  );
});
