import React, {Component} from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Linking,
  FlatList,
  RefreshControl
} from 'react-native';
import NaviBar from '../../components/navi-bar';
import history from '../../common/history';
import {inject, observer} from 'mobx-react';
import LoadingView from '../../common/loading';
import {observable} from 'mobx';
import {width, height} from '../../common/screen';
import HistoryList from '../history/historyList';

let data = [
  {
    id: '34890',
    apartmentName: 'sha tin house',
    address: 'abc Village, Sha tin',
    date: '1/9/2019',
    apartmentId: '4545456',
    owner: {
      name: 'Herbert Chan',
      email: 'herbert@nirons.com',
      id: '432545435',
      phone: '94341123',
      countryCode: '852',
    },
    tenant: {
      name: 'Tom Chan',
      email: 'Tom@nirons.com',
      id: '432234435',
      phone: '56781234',
      countryCode: '852',
    },
    status: 'Processing',
    problem: '業主發現租客令門鎖不能使用',
    log: [
      {
        date: '1/9/2019',
        msg:
          '業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用業主發現租客令門鎖不能使用',
      },
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '與租客溝通中'},
    ],
    cost: 100,
    payment: 'Completed',
  },
  {
    id: '13456',
    apartmentName: '大圍村屋',
    address: 'yoho, yuen long',
    date: '1/9/2019',
    apartmentId: '4543256',
    owner: {
      name: 'Herbert Chan',
      email: 'herbert@nirons.com',
      id: '432545435',
      phone: '94341123',
      countryCode: '852',
    },
    tenant: {
      name: 'Tom Chan',
      email: 'Tom@nirons.com',
      id: '432234435',
      phone: '56781234',
      countryCode: '852',
    },
    status: 'Pending Payment',
    problem: '電視壞了',
    log: [{date: '1/9/2019', msg: '電視壞了'}],
    cost: 1000,
    payment: 'Pending Payment',
  },
  {
    id: '34890',
    apartmentName: 'yo ho',
    address: 'sun tin village, tai wai',
    date: '1/9/2019',
    apartmentId: '4545491',
    owner: {
      name: 'Herbert Chan',
      email: 'herbert@nirons.com',
      id: '432545435',
      phone: '94341123',
      countryCode: '852',
    },
    tenant: {
      name: 'Tom Chan',
      email: 'Tom@nirons.com',
      id: '432234435',
      phone: '56781234',
      countryCode: '852',
    },
    status: 'Completed', //如果未俾錢就"Pending Payment"  俾左錢就係"Processing"   完成就係"Completed"  取消"cancel"
    problem: '業主希望加租',
    log: [
      {date: '1/9/2019', msg: '業主希望加租'},
      {date: '1/9/2019', msg: '與租客溝通中'},
      {date: '1/9/2019', msg: '租客願意'},
    ],
    cost: 500, //cs can set the cost
    payment: 'N/A', //個case唔洗俾錢就係N/A  //未俾就係'Pending Payment' //俾左就係'Completed'
  },
];
@inject('appStore')
@observer
export default class History extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentWillMount() {
    this.store.getCase();
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <NaviBar
          title={'Home'}
          self={this}
          onPress={() => {
            if (this.store.logined) {
              this.store.gotohelperChat(this);
            }
          }}
        />
        <LoadingView visible={this.store.loading} />
        <ScrollView
          // contentContainerStyle={{flex: 1, justifyContent: 'center'}}
          refreshControl={
            <RefreshControl
              refreshing={this.store.loading}
              onRefresh={() => this.store.getCase()}
            />
          }>
          <FlatList
            data={this.store.case}
            renderItem={({item}) => (
              <HistoryList
                items={item}
                onPress={() => {
                  history.push(this, '/problemCase', {
                    apartmentData: item.apartment,
                    type: 'edit',
                    data: item,
                  });
                }}
              />
            )}
            keyExtractor={item => item.id}
          />
        </ScrollView>
      </View>
    );
  }
}
