import React from 'react';
import {
  NavigationScreenProps,
  NavigationScreenProp,
  SectionList
} from 'react-navigation';
import { View } from 'react-native-animatable';
import { SearchBar, ListItem, Button, Text } from 'react-native-elements';
import _ from 'lodash';
import { Option } from '@shared/interfaces';

interface Props {
  navigation: NavigationScreenProp<any, any>;
}

interface State {
  query: string;
  selectedOptions: Array<Option>;
  filteredOptions: Array<Option>;
  options: Array<Option>;
}

class SelectScreen extends React.Component<Props, State> {
  static navigationOptions = ({ navigation }: NavigationScreenProps) => {
    const { params } = navigation.state;
    return params;
  };
  selectedOptionsTitle = 'Selected Options';
  selectedOptionsSubtitle = '';
  availableOptionsTitle = 'Available Options';
  availableOptionsSubtitle = '';

  constructor(props: Props) {
    super(props);

    const { navigation } = this.props;

    navigation.setParams({
      headerTitle: navigation.getParam('title')
    });

    this.state = {
      query: '',
      selectedOptions: [],
      filteredOptions: [],
      options: []
    };
  }

  componentDidMount() {
    this.initializeOptions();
    this.initializeSelectedOptions();
    this.initializeFilteredOptions();
    this.count++;
  }

  initializeOptions = () => {
    const { navigation } = this.props;
    const options = navigation.getParam('options');

    console.log('initializeOptions');
    console.log('options', options);
    this.setState({
      options
    });
  };

  initializeSelectedOptions = () => {
    const { navigation } = this.props;
    const options = navigation.getParam('options');
    const selected = navigation.getParam('selectedOptions');
    console.log('initializeSelectedOptions');
    console.log('options', options, 'selected', selected);
    this.setState({
      selectedOptions: options.filter((option: Option) =>
        selected.includes(option.value)
      )
    });
  };

  initializeFilteredOptions = () => {
    const { navigation } = this.props;
    const options = navigation.getParam('options');

    console.log('initializeFilteredOptions');
    this.setState({
      filteredOptions: options
    });
  };

  filter = (query: string) => {
    const { options } = this.state;
    let filteredOptions = options;

    if (query != '') {
      filteredOptions = options.filter(
        option => option.display.toLowerCase().indexOf(query.toLowerCase()) > -1
      );
    }

    this.setState({ query, filteredOptions });
  };

  deselect = (option: Option) => {
    const { selectedOptions } = this.state;

    this.setState({
      selectedOptions: _.reject(
        selectedOptions,
        selectedOption => selectedOption.value === option.value
      )
    });
  };

  select = (option: Option) => {
    const { selectedOptions } = this.state;

    const existingSelectedOption = _.find(selectedOptions, {
      value: option.value
    });

    if (!existingSelectedOption) {
      this.setState({
        selectedOptions: [option].concat(selectedOptions)
      });
    }
  };

  renderSearch = () => {
    const { query } = this.state;
    return (
      <SearchBar
        placeholder="Search Here..."
        onChangeText={this.filter}
        value={query}
      />
    );
  };

  renderSelectedOptions = ({ item }) => {
    return (
      <ListItem
        title={item.display}
        rightIcon={{ name: 'close', onPress: () => this.deselect(item) }}
      />
    );
  };
  renderOptions = ({ item }) => {
    const { selectedOptions } = this.state;
    const isSelected = _.find(selectedOptions, { value: item.value });
    return (
      <ListItem
        key={item.value}
        title={item.display}
        titleStyle={{ color: isSelected ? '#ddd' : '#000' }}
        bottomDivider
        onPress={() => this.select(item)}
      />
    );
  };

  renderSectionHeader = ({ section }) => {
    return (
      <ListItem
        containerStyle={{ backgroundColor: '#eee' }}
        title={section.title}
        subtitle={section.subtitle === '' ? null : section.subtitle}
      />
    );
  };
  renderSectionFooter = ({ section }) => {
    if (section.data.length == 0) {
      if (section.title === this.selectedOptionsTitle) {
        return <ListItem title={'No selected options.'} />;
      } else if (section.title === this.availableOptionsTitle) {
        return <ListItem title={'No available options.'} />;
      }
    }
    return null;
  };

  renderSubmitButton = () => {
    const { navigation } = this.props;
    const { selectedOptions } = this.state;
    const onSelect = navigation.getParam('onSelect');

    return (
      <Button
        title="Select"
        onPress={() => {
          navigation.goBack();
          onSelect(selectedOptions);
        }}
      />
    );
  };

  render() {
    const { filteredOptions, selectedOptions } = this.state;

    return (
      <View style={{ flex: 1 }}>
        {this.renderSearch()}

        <SectionList
          sections={[
            {
              title: this.selectedOptionsTitle,
              subtitle: this.selectedOptionsSubtitle,
              data: selectedOptions,
              renderItem: this.renderSelectedOptions,
              keyExtractor: item => item.value
            },
            {
              title: this.availableOptionsTitle,
              subtitle: this.availableOptionsSubtitle,
              data: filteredOptions,
              renderItem: this.renderOptions,
              keyExtractor: item => item.value
            }
          ]}
          renderSectionHeader={this.renderSectionHeader}
          renderSectionFooter={this.renderSectionFooter}
        />

        {this.renderSubmitButton()}
      </View>
    );
  }
}

export default SelectScreen;