import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ScrollView,
} from 'react-native';

import ScrollableContainer from '../components/scrollableContainer'
import Modal from '../components/modal'
import Container from '../components/container'
import ClearText from '../components/text'
import TimelineEvent from './timelineEvent'
import TimelineFull from './timelineFull'
import TimelineHeader from './timelineHeader'
import TimelineFilter from './timelineFilter'
import TickMarks from './tickMarks'

export default class Timeline extends Component {
  constructor(props) {
    super()
    this.state = {
      events: props.events,
      tag: props.tag,
      introVisible: props.firstTime,
      modalVisible: false,
      filterVisible: false,
      item: null,

      introVisible: false,
//       modalVisible: true,
//       item: props.events[2],
    }
    this.onPress = this.onPress.bind(this)
    this.onFilter = this.onFilter.bind(this)
    this.scrollToIndex = this.scrollToIndex.bind(this)
    this.items = []
  }
  onPress(item) {
    this.setState({
      modalVisible: true,
      item: item,
    })
  }
  onFilter(tag) {
    let events;
    if (!! tag && tag !== this.state.tag) {
      events = this.props.events.filter((e) => e && e.keywords.includes(tag))
    }
    else {
      events = this.props.events
    }
    this.setState({ events, tag, modalVisible: false, filterVisible: false })
  }
  scrollToIndex(index) {
    // this.flatList._listRef.scrollToIndex(index)
    // this.scrollable.scrollToIndex({index: index})
    const offset = this.items[index].ref.parentNode.offsetTop
    this.scrollable.scrollView.scrollTo({
      y: offset,
      x: 0,
      animated: true,
    })
  }
  render() {
    const heading = this.state.tag || 'History of Surveillance'
    const items = this.state.events.map((item, i) => (
      <TimelineEvent ref={(ref) => this.items[i] = ref} key={item.id} onPress={this.onPress} item={item} />
    ))

    return (
      <View>
        <ScrollableContainer ref={(ref) => this.scrollable = ref} heading={heading} headingOnPress={() => this.onFilter("")}>
          {items}
        </ScrollableContainer>
        <TickMarks events={this.state.events} scrollToIndex={this.scrollToIndex} />
        <Modal isVisible={this.state.introVisible} style={[styles.modal, styles.headerModal]}>
          <TimelineHeader
            content={this.props.content}
            onLinkPress={this.props.onLinkPress}
            onClose={() => this.setState({ introVisible: false })}
          />
        </Modal>
        <Modal isVisible={this.state.modalVisible} style={styles.modal}>
          <TimelineFull
            item={this.state.item}
            onLinkPress={this.props.onLinkPress}
            onFilter={this.onFilter}
            onClose={() => this.setState({ modalVisible: false })}
          />
        </Modal>
      </View>
    )
  }
}



//         <View style={styles.body}>
//           <View style={styles.sidebar}>
//             <TouchableOpacity onPress={() => this.setState({ filterVisible: true })}>
//               <ClearText style={[styles.filterText, !! this.state.tag ? styles.filterActive : styles.filterInactive ]}>
//                 { !! this.state.tag ? 'FILTER' : '' }
//               </ClearText>
//             </TouchableOpacity>
//           </View>
//         </View>

//         <Modal isVisible={this.state.filterVisible} style={styles.modal}>
//           <TimelineFilter
//             events={this.props.events}
//             tag={this.state.tag}
//             onFilter={this.onFilter}
//             onClose={() => this.setState({ filterVisible: false })}
//           />
//         </Modal>

const styles = StyleSheet.create({
  wrapper: {
  },
  modal: {
    margin: 0,
    padding: 0,
  },
  headerModal: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: 'rgb(0,0,0)',
    margin: 0,
    padding: 0,
  },
  body: {
    flexDirection: 'row',
    height: 840,
  },
  flatList: {
  },
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  sidebar: {
    flex: 0,
  },
  filterText: {
    color: '#bbb',
    textAlign: 'left',
    fontSize: 12,
    marginLeft: 4,
  },
  filterActive: {
    color: '#fff',
    textDecorationLine: 'underline',
  },
  filterInactive: {
    color: '#bbb',
  },
  tickMarks: {
    flex: 0,
  },
})