import React, { Component } from 'react';
import {SectionList,StyleSheet,View} from 'react-native';
import { Container, Header, Content, List, ListItem, Text,Item,Icon,Input,Button } from 'native-base';
export default class MyAccountPage extends Component {
  constructor(props){
  super(props);

  this.state={listData:[
    {title: 'A', data: ['item1', 'item2']},
    {title: 'B', data: ['item3', 'item4']},
    {title: 'C', data: ['item5', 'item6']},
    {title: 'D', data: ['item1', 'item2']},
    {title: 'E', data: ['item3', 'item4']},
    {title: 'F', data: ['item5', 'item6']},
    {title: 'G', data: ['item1', 'item2']},
    {title: 'H', data: ['item3', 'item4']},
    {title: 'I', data: ['item5', 'item6']},
    {title: 'J', data: ['item5', 'item6']},
    {title: 'K', data: ['item1', 'item2']},
    {title: 'L', data: ['item3', 'item4']},
    {title: 'M', data: ['item5', 'item6']},
    {title: 'N', data: ['item1', 'item2']},
    {title: 'O', data: ['item3', 'item4']},
    {title: 'P', data: ['item5', 'item6']},
    {title: 'Q', data: ['item1', 'item2']},
    {title: 'R', data: ['item3', 'item4']},
    {title: 'S', data: ['item5', 'item6']},
  ],
}
  }
  scrollToSection = (index) => {
    this.sectionListRef.scrollToLocation({
      animated: true,
      sectionIndex: index,
      itemIndex: 0,
      viewPosition: 0.05
    });
  };

  render() {
    return (
      <View style={{
        flex: 1,
        paddingTop:20,
      }}>
<Header searchBar rounded>
          <Item>
            <Icon name="ios-search" />
            <Input placeholder="Search" />
            <Icon name="ios-people" />
          </Item>
          <Button transparent>
            <Text>Search</Text>
          </Button>
        </Header>
    <View style={{flex:1,flexDirection:'row'}}>
    <View style={{flex:1}}>
    <SectionList
      showsHorizontalScrollIndicator={true}
      ref={ref => { this.sectionListRef = ref; }}
      renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      sections={this.state.listData}
      keyExtractor={(item, index) => item + index}
    />
    </View>

    <View>
      {this.state.listData.map((listData,index)=>{
        return <Text onPress={()=>{this.scrollToSection(index)}}>{listData.title}</Text>
      })}
    </View>
    </View>

    </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop:20,

  },
});