/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  SafeAreaView,
  TouchableOpacity,
  ImageBackground,
  Dimensions,
} from 'react-native';
import { IImageStyle, ITextStyle, IViewStyle } from 'react-native-screen-adapter';
import { navigator, router } from 'mario-navigation-extension';
import SplashScreen from 'react-native-splash-screen';

import { Color, Images } from '@constant';

export interface IStyle {
  safeContainer: IViewStyle;
  container: IViewStyle;
  contentContainer: IViewStyle;
  titleContainer: IViewStyle;
  title: ITextStyle;
  details: ITextStyle;
  skipContainer: IViewStyle;
  skipTitle: ITextStyle;
  indicatorContainer: IViewStyle;
  indicator: IViewStyle;
  activeIndicator: IViewStyle;
  startContainer: IViewStyle;
  startTitle: ITextStyle;
}

function SkipButton(props: any) {
  return (
    <TouchableOpacity activeOpacity={0.8} style={styles.skipContainer} onPress={props.onPress}>
      <Text style={styles.skipTitle}>{props.title}</Text>
    </TouchableOpacity>
  );
}

function TitleView(props: any) {
  return (
    <View style={styles.titleContainer}>
      <Text style={styles.title}>{props.title}</Text>
      <Text style={styles.details}>{props.details}</Text>
      <SkipButton title="跳过" onPress={props.onPress} />
    </View>
  );
}

function Indicator(props: any) {
  const list = [0, 1, 2, 3].map((item) => {
    const indicatorStyle = props.activeIndex === item ? styles.activeIndicator : styles.indicator;
    return <View key={item} style={indicatorStyle} />;
  });
  return <View style={styles.indicatorContainer}>{list}</View>;
}

function StartButton(props: any) {
  return (
    <TouchableOpacity activeOpacity={0.8} style={styles.startContainer} onPress={props.onPress}>
      <Text style={styles.startTitle}>{props.title}</Text>
    </TouchableOpacity>
  );
}

function handlePress() {
  router.replace('TabContainer');
}

export default (props: Readonly<any>) => {
  navigator.init(props.navigation);
  SplashScreen.hide();
  return (
    <SafeAreaView style={styles.safeContainer}>
      <ScrollView
        horizontal={true}
        pagingEnabled={true}
        indicatorStyle="white"
        showsHorizontalScrollIndicator={false}
      >
        <ImageBackground source={Images.guide_0} resizeMode="stretch" style={styles.container}>
          <TitleView title="高效对公交易" details="随时随地  实时交易" onPress={handlePress} />
          <Indicator activeIndex={0} />
        </ImageBackground>
        <ImageBackground source={Images.guide_1} resizeMode="stretch" style={styles.container}>
          <TitleView title="极速行情资讯" details="行情动态全掌控  热点资讯全覆盖" onPress={handlePress} />
          <Indicator activeIndex={1} />
        </ImageBackground>
        <ImageBackground source={Images.guide_2} resizeMode="stretch" style={styles.container}>
          <TitleView title="实时消息通知" details="领导重要消息  再也不会错过" onPress={handlePress} />
          <Indicator activeIndex={2} />
        </ImageBackground>
        <ImageBackground source={Images.guide_3} resizeMode="stretch" style={styles.container}>
          <TitleView title="企业便携办公" details="资产视图洞察  便捷快速高效" onPress={handlePress} />
          <StartButton title="立即体验" onPress={handlePress} />
        </ImageBackground>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create<IStyle>({
  safeContainer: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width$: 375,
  },
  contentContainer: {
    backgroundColor: 'yellow',
  },
  titleContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 104,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
  title: {
    fontSize: 36,
    // fontFamily: 'HYk2gj',
    color: Color.red,
  },
  details: {
    color: Color.fontColor,
    marginTop: 16,
    $fontSize: '$middleFontSize',
  },
  skipContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width$: 64,
    height$: 28,
    backgroundColor: Color.line,
    borderRadius: 17.5,
    position: 'absolute',
    top: 32,
    right: 16,
  },
  skipTitle: {
    color: Color.fontColor,
    $fontSize: '$middleSmallFontSize',
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 60,
  },
  indicator: {
    width$: 6,
    height$: 6,
    backgroundColor: Color.maskColor,
    marginHorizontal: 4,
    borderRadius: 4,
  },
  activeIndicator: {
    width$: 16,
    height$: 6,
    backgroundColor: Color.red,
    marginHorizontal: 4,
    borderRadius: 4,
  },
  startContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    height$: 48,
    backgroundColor: Color.red,
    borderRadius: 24,
    position: 'absolute',
    left: 68,
    right: 68,
    bottom: 32,
  },
  startTitle: {
    color: Color.white,
    $fontSize: '$middleFontSize',
  },
});