import React, {Component} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Image} from 'react-native';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Migrations from '../../services/realm/Mirgrations';
import {inject, observer} from 'mobx-react';
import BackHeader from '../../components/backHeader';
import {width, height} from '../../common/screen';
import {observable} from 'mobx';

@inject('appStore')
@observer
export default class SelectChar extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
    console.log(this.store.logined);
  }

  renderContents() {
    var data = [
      {
        title: '業主',
        content: '可管理自己的物業文件，提示租客提交租金。',
        value: 0,
        image: require('../../assets/images/newowner.png'),
      },
      {
        title: '租客',
        content: '可隨時查看自己的租約，並會自動收到交租提示。',
        value: 1,
        image: require('../../assets/images/newtenant.png'),
      },
      {
        title: '遊客',
        content: '只想看看最新物業資訊，免費二手傢俬。',
        value: 2,
        image: require('../../assets/images/free.png'),
      },
    ];
    return data.map((items, index) => {
      return (
        <TouchableOpacity
          style={{
            backgroundColor: 'white',
            borderRadius: 30,
            width: width - 20,
            height: 150,
            marginTop: 15,
            flexDirection: 'row',
          }}
          onPress={() => this.clickAction(items.value)}>
          <View
            style={{
              flex: 0.2,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={items.image}
              style={{height: 100, width: 50}}
              resizeMode="contain"
            />
          </View>
          <View
            style={{
              flex: 0.55,
              justifyContent: 'center',
              marginBottom: 10,
            }}>
            <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
              {items.title}
            </Text>
            <Text
              style={{
                fontFamily: Fonts.ubuntu,
                fontSize: 17,
                color: colors.textColor,
              }}>
              {items.content}
            </Text>
          </View>
          <View
            style={{
              flex: 0.25,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <View
              style={{
                width: 80,
                height: 35,
                backgroundColor: 'black',
                borderRadius: 20,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntu,
                  fontSize: 16,
                  color: 'white',
                }}>
                {'選擇'}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      );
    });
  }
  componentDidMount() {}

  clickAction(value) {
    switch (value) {
      case 0:
        var data = {
          type: 0,
          first: true,
        };
        this.props.navigation.navigate('Tutorial', {
          tutdata: data,
        });
        break;
      case 1:
        var data = {
          type: 1,
          first: true,
        };
        this.props.navigation.navigate('Tutorial', {
          tutdata: data,
        });
        break;
      case 2:
        this.props.navigation.navigate('guest', {back: true});
        break;
    }
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: colors.mainColor,
        }}>
        <BackHeader back={false} instance={this} />

        <Text style={[styles.titleStyle, {marginBottom: 20}]}>
          {'請選擇角色'}
        </Text>
        {this.renderContents()}

        {/* <TouchableOpacity
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            // marginTop:60,
          }}
          onPress={() => {
            var data = {
              type: 0,
              first: true,
            };
            this.props.navigation.navigate('Tutorial', {
              tutdata: data,
            });
          }}>
          <Image source={require('../../assets/images/owner.png')} />

          <Text style={[styles.textStyle, {marginTop: 10}]}>
            {this.store.text.owner}
          </Text>
        </TouchableOpacity>
        <View
          style={{
            width: width - scale(60),
            height: 1,
            backgroundColor: 'white',
            marginTop: 70,
          }}
        />
        <TouchableOpacity
          style={{
            height: 200,
            width: 200,
            marginTop: 60,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => {
            var data = {
              type: 1,
              first: true,
            };
            this.props.navigation.navigate('Tutorial', {
              tutdata: data,
            });
          }}>
          <Image source={require('../../assets/images/tenant.png')} />

          <Text style={[styles.textStyle, {marginTop: 10}]}>
            {this.store.text.tenant}
          </Text>
        </TouchableOpacity> */}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.mainColor,
  },
  buttonText: {
    color: '#fff',
  },
  textStyle: {
    color: 'white',
    fontFamily: Fonts.ubuntu,
    fontSize: 14,
  },
  titleStyle: {
    color: 'white',
    fontFamily: Fonts.ubuntu,
    fontSize: 30,
  },
});
