import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {StyleSheet, View, Text, Image, Platform} from 'react-native';
import Realm from 'realm';
import LinearGradient from 'react-native-linear-gradient';
import AppIntroSlider from 'react-native-app-intro-slider';
import {createUser} from '../../services/realm/realmManger';
import {colors} from '../../assets/styles/colors-theme';
import {inject, observer} from 'mobx-react';
import DeviceInfo from 'react-native-device-info';
import {observable} from 'mobx';
import {Fonts} from '../../assets/styles/fonts-theme';
import Size from '../../common/size';
import {width, height} from '../../common/screen';
import {
  UserSchemea,
  ApartmentSchemea,
  DocSchemea,
  NotificationSchemea,
} from '../../services/realm/schemeas';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import moment from 'moment';
const size = new Size();
let realm = new Realm({
  schema: [UserSchemea, ApartmentSchemea, DocSchemea, NotificationSchemea],
});
//I18nManager.forceRTL(false);

const styles = StyleSheet.create({
  mainContent: {
    flex: 1,
    alignItems: 'center',
  },
  buttonCircle: {
    marginRight: 20,
    marginTop: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 320,
    height: 320,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.8)',
    backgroundColor: 'transparent',
    textAlign: 'center',
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 22,
    color: 'white',
    backgroundColor: 'transparent',
    textAlign: 'center',
    marginBottom: 16,
  },
});

const ownerslides = [
  {
    uri: require('../../assets/images/ownertut1.png'),
  },
  {
    uri: require('../../assets/images/ownertut2.png'),
  },
  {
    uri: require('../../assets/images/ownertut3.png'),
  },
  {
    uri: require('../../assets/images/ownertut4.png'),
  },
  {
    uri: require('../../assets/images/ownertut5.png'),
  },
  {
    uri: require('../../assets/images/ownertut6.png'),
  },
  {
    uri: require('../../assets/images/ownertut7.png'),
  },
];

const normalSlides = [
  {
    uri: require('../../assets/images/manage.png'),
    title: '一鍵管理物業',
    content: '業主簽發電子租金收據',
  },
  {
    uri: require('../../assets/images/contract.png'),
    title: '電子租約',
    content: '續租怎麼辦？足不出戶用電子租約就可簽妥',
  },
  {
    uri: require('../../assets/images/repair.png'),
    title: '服務商資訊',
    content: '集合家居維修服務商，省時管理',
  },
  {
    uri: require('../../assets/images/renthistory.png'),
    title: '租務成交紀錄',
    content: '想知行情？ RENT CHAT收錄全港最新的租務成交紀錄',
  },
  {
    uri: require('../../assets/images/freefurniture.png'),
    title: '免費二手傢俱',
    content: '租咗新樓但又要洗錢買傢俱 ？ 我們有免費二手傢俱平台，拎包即入伙',
  },
  {
    uri: require('../../assets/images/econnews.png'),
    title: '經濟新聞',
    content: '緊貼市場資訊',
  },
];

const tenantslides = [
  {
    uri: require('../../assets/images/tenanttut1.png'),
  },
  {
    uri: require('../../assets/images/tenanttut2.png'),
  },
  {
    uri: require('../../assets/images/tenanttut3.png'),
  },
  {
    uri: require('../../assets/images/tenanttut4.png'),
  },
  {
    uri: require('../../assets/images/tenanttut5.png'),
  },
  {
    uri: require('../../assets/images/tenanttut6.png'),
  },
  {
    uri: require('../../assets/images/tenanttut7.png'),
  },
];
@inject('appStore')
@observer
export default class Tutorial extends Component {
  @observable
  slides = [];
  @observable
  tutWidth = 300;

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentWillMount() {
    if (DeviceInfo.isTablet()) {
      this.tutWidth = 200;
    } else {
      300;
    }
    if (this.props.navigation.getParam('type', 1) == 0) {
      this.slides = normalSlides;
    } else {
      this.slides = normalSlides;
    }
  }

  async onDone() {
    var tutdata = this.props.navigation.state.params.tutdata;
    if (!tutdata.first) {
      this.props.navigation.navigate(
        'main',
        {},
        NavigationActions.navigate({routeName: 'profile'}),
      );
    } else {
      await createUser(tutdata.type);
      if (tutdata.type == 0) {
        let user = realm.objects('User');
        var now = new Date();
        var oneyearlater = moment(now).add(1, 'years');
        let newApartment = {
          id: 'demo',
          unit: 'low',
          floor: '',
          seats: '',
          createDate: new Date(),
          modifyDate: null,
          name: 'Demo',
          address: 'Demo address',
          avatar: '../../assets/images/demohouse.png',
          signContractDate: new Date(),
          endContractDate: oneyearlater.toDate(),
          rent: 10000,
          leaseMonth: 12,
          deposit: 10000,
          country: 'hk',
          callingCode: '+852',
          rentNotification: 0,
          endContractNotification: 0,
          rentNotificationId: [],
          remark: [],
          doc: [],
        };
        await realm.write(() => {
          user[0].apartment.push(newApartment);
        });
        await this.store.getUser();
        //await this.store.startTut();
        this.props.navigation.navigate('mainPage');
      } else {
        let user = realm.objects('User');
        var now = new Date();
        var oneyearlater = moment(now).add(1, 'years');
        let newApartment = {
          id: 'demo',
          unit: 'low',
          floor: '',
          seats: '',
          createDate: new Date(),
          modifyDate: new Date(),
          name: 'Demo',
          address: 'Demo address',
          avatar: '../../assets/images/demohouse.png',
          signContractDate: new Date(),
          endContractDate: oneyearlater.toDate(),
          leaseMonth: 12,
          deposit: 10000,
          rent: 10000,
          country: 'hk',
          callingCode: '+852',
          rentNotification: 0,
          endContractNotification: 0,
          rentNotificationId: [],
          remark: [],
          doc: [],
        };
        await realm.write(() => {
          user[0].apartment.push(newApartment);
        });
        await this.store.getUser();
        this.props.navigation.navigate('signin', {icon: false});
      }
    }
  }
  _renderSkipButton = () => {
    return (
      <View style={{marginTop: 10, marginLeft: 10}}>
        <Text
          style={{
            fontSize: 20,
            color: colors.mainColor,
            fontFamily: Fonts.ubuntu,
          }}>
          略過
        </Text>
      </View>
    );
  };

  _renderNextButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Icon name="arrow-right" color={colors.mainColor} size={24} />
      </View>
    );
  };
  _renderBackButton = () => {
    return (
      <View
        style={{
          marginLeft: 20,
          marginTop: 12,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Icon name="arrow-left" color={colors.mainColor} size={24} />
      </View>
    );
  };

  _renderDoneButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Icon name="check" color={colors.mainColor} size={24} />
      </View>
    );
  };

  _renderItem = ({item, dimensions}) => (
    <View
      style={[
        styles.mainContent,
        {
          backgroundColor: 'white',
          flex: 1,
          alignItems: 'center',

          width: width,
        },
      ]}>
      <Text
        style={{
          fontSize: 25,
          color: colors.mainColor,
          marginTop: Platform.OS == 'ios' ? 50 : 35,
          fontFamily: Fonts.ubuntu,
        }}>
        歡迎使用 RENT CHAT!
      </Text>
      <Image
        style={{height: 200, width: 200, marginTop: 40}}
        resizeMode={'contain'}
        source={item.uri}
      />

      <Text
        style={{
          fontSize: 20,
          color: 'black',
          marginTop: 25,
          fontFamily: Fonts.ubuntu,
        }}>
        {item.title}
      </Text>
      <Text
        style={{
          width: 280,
          fontSize: 15,
          color: colors.textColor,
          marginTop: 3,
          fontFamily: Fonts.ubuntu,
          textAlign: 'center',
        }}>
        {item.content}
      </Text>
      <Icon
        style={{
          position: 'absolute',
          top: Platform.OS == 'ios' ? 20 : 35,
          left: 10,
        }}
        name="arrow-left"
        size={30}
        color={colors.mainColor}
        onPress={() => {
          var tutdata = this.props.navigation.state.params.tutdata;
          console.log(tutdata);
          if (!tutdata.first) {
            this.props.navigation.navigate(
              'main',
              {},
              NavigationActions.navigate({routeName: 'profile'}),
            );
          } else {
            this.props.navigation.navigate('SelectChar');
          }
        }}
      />
    </View>
  );

  render() {
    return (
      <AppIntroSlider
        slides={this.slides}
        renderItem={this._renderItem}
        // bottomButton
        activeDotStyle={{backgroundColor: colors.mainColor}}
        showPrevButton
        showSkipButton
        renderSkipButton={this._renderSkipButton}
        renderDoneButton={this._renderDoneButton}
        renderNextButton={this._renderNextButton}
        renderPrevButton={this._renderBackButton}
        onDone={() => {
          this.onDone();
        }}
        // hideNextButton
        // hideDoneButton
        // onSkip={() => console.log("skipped")}
      />
    );
  }
}
