/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

'use strict';

const React = require('react');
const {
  Alert,
  Animated,
  Button,
  StyleSheet,
  Text,
  View,
  TextInput,
  AppRegistry,
} = require('react-native');

const {
  HeaderComponent,
  FooterComponent,
  ItemComponent,
  PlainInput,
  SeparatorComponent,
  Spindicator,
  genItemData,
  pressItem,
  renderSmallSwitchOption,
  renderStackedItem,
} = require('./ListExampleShared');

const renderSectionHeader = ({section}) => (
  <View style={styles.header}>
    <Text style={styles.headerText}>SECTION HEADER: {section.key}</Text>
    <SeparatorComponent />
  </View>
);

const CustomSeparatorComponent = () => (
  <View style={[styles.customSeparator]} />
);

class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
  state = {
    sectionIndex: '',
    itemIndex: '',
  };

  _sectionListRef: Animated.SectionList;
  _captureRef = ref => {
    this._sectionListRef = ref;
  };

  _scrollToLocation(sectionIndex: number, itemIndex: number) {
    this._sectionListRef
      .getNode()
      .scrollToLocation({sectionIndex, itemIndex, viewPosition: 0});
  }

  scroll = () => {
    const {sectionIndex, itemIndex} = this.state;
    this._scrollToLocation(parseInt(sectionIndex), parseInt(itemIndex));
  };

  render() {
    return (
      <>
        <TextInput
          style={{
            marginTop: 40,
            height: 40,
            borderColor: 'gray',
            borderWidth: 1,
          }}
          onChangeText={sectionIndex => this.setState({sectionIndex})}
          value={this.state.sectionIndex}
          placeholder="section index"
          keyboardType="number-pad"
        />
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={itemIndex => this.setState({itemIndex})}
          value={this.state.itemIndex}
          placeholder="item index"
          keyboardType="number-pad"
        />
        <Text onPress={this.scroll}>scroll</Text>
        <Animated.SectionList
          ref={this._captureRef}
          renderItem={this._renderItemComponent}
          style={styles.list}
          stickySectionHeadersEnabled={false}
          // ItemSeparatorComponent={CustomSeparatorComponent}
          renderItem={({item, index, section}) => (
            <Text key={index} style={styles.itemStyle}>
              {item}
            </Text>
          )}
          renderSectionHeader={({section: {title}}) => (
            <Text style={styles.headerStyle}>{title}</Text>
          )}
          sections={[
            {title: 'section0', data: ['item1', 'item2']},
            {title: 'section1', data: ['item3', 'item4']},
            {title: 'section2', data: ['item5', 'item6']},
            {title: 'section3', data: ['item7', 'item8']},
            {title: 'section4', data: ['item9', 'item10']},
          ]}
          keyExtractor={(item, index) => item + index}
        />
      </>
    );
  }

  _renderItemComponent = ({item, separators}) => (
    <ItemComponent
      item={item}
      onPress={this._pressItem}
      onHideUnderlay={separators.unhighlight}
      onShowUnderlay={separators.highlight}
    />
  );

  _pressItem = (key: string) => {
    !isNaN(key) && pressItem(this, key);
  };
}

const styles = StyleSheet.create({
  customSeparator: {
    backgroundColor: 'blue',
    height: 5,
  },
  header: {
    backgroundColor: '#e9eaed',
  },
  headerText: {
    padding: 4,
    fontWeight: '600',
  },
  list: {
    backgroundColor: 'white',
  },
  scrollToRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
  },
  separatorText: {
    color: 'gray',
    alignSelf: 'center',
    fontSize: 7,
  },
  itemStyle: {
    height: 100,
  },
  headerStyle: {
    fontWeight: 'bold',
    height: 25,
  },
});

AppRegistry.registerComponent('RNTesterApp', () => SectionListExample);

module.exports = SectionListExample;