// @flow
import React, { PureComponent } from 'react';
import { FlatList, StyleSheet, View, ActivityIndicator } from 'react-native';
import { type NavigationScreenProps } from 'react-navigation';
import { Page, Card, CardFormButton, Text } from '../../components';
import { SubmitEditPoiButton } from './components/SubmitEditPoiButton';
import I18n from '../../lib/I18n';
import theme from '../../theme';

type PropsType = {
  loading: boolean,
  poiTypes?: PoiTypeType[],
  tags?: TagType[],
  address?: string,
  name?: string,
  email?: string,
  phoneNumber?: string,
  description?: string,
  website?: string,
  clearUserInputPointOfInterest: Function,
} & NavigationScreenProps;

export default class EditPoi extends PureComponent<PropsType> {
  componentWillUnmount() {
    this.props.clearUserInputPointOfInterest();
  }
  static navigationOptions = () => ({
    headerRight: <SubmitEditPoiButton />,
  });

  _navigateToPoiTypeSelection = () => {
    const { navigation } = this.props;
    return navigation.navigate('SelectPoiTypes', {
      title: I18n.t('EditPoi.PoiType.title'),
      stepTitle: I18n.t('EditPoi.PoiType.step_title'),
      buttonLabel: I18n.t('EditPoi.back_button_label'),
      fromEditPoi: true,
    });
  };

  _navigateToPoiNameAndAdress = () => {
    const { navigation } = this.props;
    return navigation.navigate('SelectPoiNameAndAddress', {
      fromEditPoi: true,
      title: I18n.t('EditPoi.PoiNameAndAddress.title'),
    });
  };

  _navigateToPoiTags = () => {
    const { navigation } = this.props;
    return navigation.navigate('SelectPoiTags', {
      fromEditPoi: true,
    });
  };

  _navigateToEditPoiField = type => {
    const { navigation } = this.props;
    return navigation.navigate('EditPoiField', {
      type,
    });
  };

  _getFormSections = () => {
    const { poiTypes, tags, name, address, email, phoneNumber, website, description } = this.props;
    return [
      {
        title: I18n.t('EditPoi.name_and_address'),
        value: name ? (address ? `${name} - ${address}` : name) : '',
        onPress: this._navigateToPoiNameAndAdress,
      },
      {
        title: I18n.t('EditPoi.poi_types'),
        value: poiTypes ? poiTypes.map(({ type }) => I18n.t('Map.PoiType.' + type.toLowerCase())).join(', ') : '',
        onPress: this._navigateToPoiTypeSelection,
      },
      {
        title: I18n.t('EditPoi.tags'),
        value: tags
          ? tags
              .map(({ name }) => {
                return name
                  ? name.length > 1 ? name.charAt(0).toUpperCase() + name.slice(1).toLowerCase() : name.toUpperCase()
                  : '';
              })
              .filter(Boolean)
              .join(', ')
          : '',
        onPress: this._navigateToPoiTags,
      },
      {
        title: I18n.t('EditPoi.website'),
        onPress: () => this._navigateToEditPoiField('website'),
        value: website || '',
      },
      {
        title: I18n.t('EditPoi.phoneNumber'),
        onPress: () => this._navigateToEditPoiField('phoneNumber'),
        value: phoneNumber || '',
      },
      {
        title: I18n.t('EditPoi.email'),
        onPress: () => this._navigateToEditPoiField('email'),
        value: email || '',
      },
      {
        title: I18n.t('EditPoi.description'),
        value: description || '',
        onPress: () => this._navigateToEditPoiField('description'),
        hideSeparator: true,
      },
    ];
  };

  _renderFormSection = ({ item: formSection }) => <CardFormButton {...formSection} />;

  _keyExtractor = (section): string => section.title;

  render() {
    const { loading, name } = this.props;
    return (
      <Page noPadding>
        <View style={[styles.cardContainer, !name && styles.loaderContainer]}>
          {name ? (
            <Card style={styles.card}>
              <FlatList
                bounces={false}
                data={this._getFormSections()}
                renderItem={this._renderFormSection}
                showsVerticalScrollIndicator={false}
                keyExtractor={this._keyExtractor}
              />
            </Card>
          ) : loading ? (
            <ActivityIndicator />
          ) : (
            <Text>{I18n.t('EditPoi.no_data')}</Text>
          )}
        </View>
      </Page>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    paddingTop: 0,
  },
  cardContainer: {
    margin: theme.margin,
  },
  loaderContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});