// @flow
import * as React from 'react';
import { Layout, Container } from './Layout';
import CustomScrollbars from './CustomScrollbars';
import { Text, View } from 'reactxp';
import { Button, CellButton, Label } from './styled';
import styles from './SelectLocationStyles';
import Img from './Img';

import Accordion from './Accordion';

import type {
  SettingsReduxState,
  RelayLocationRedux,
  RelayLocationCityRedux,
} from '../redux/settings/reducers';
import type { RelayLocation } from '../lib/ipc-facade';

export type SelectLocationProps = {
  settings: SettingsReduxState,
  onClose: () => void,
  onSelect: (location: RelayLocation) => void,
};

type State = {
  expanded: Array<string>,
};

export default class SelectLocation extends React.Component<SelectLocationProps, State> {
  _selectedCell: ?CellButton;
  _scrollView: ?CustomScrollbars;

  state = {
    expanded: [],
  };

  constructor(props: SelectLocationProps, context?: any) {
    super(props, context);

    // set initially expanded country based on relaySettings
    const relaySettings = this.props.settings.relaySettings;
    if (relaySettings.normal) {
      const { location } = relaySettings.normal;
      if (location === 'any') {
        // no-op
      } else if (location.country) {
        this.state.expanded.push(location.country);
      } else if (location.city) {
        this.state.expanded.push(location.city[0]);
      }
    }
  }

  componentDidMount() {
    // restore scroll to selected cell
    const cell = this._selectedCell;
    const scrollView = this._scrollView;

    if (scrollView && cell) {
      //TODO: fix this when repairing the auto-scroll in customscrollbars.
      //scrollView.scrollToElement(cell, 'middle');
    }
  }

  render() {
    return (
      <Layout>
        <Container>
          <View style={styles.select_location}>
            <Button style={styles.close} onPress={this.props.onClose} testName="close">
              <Img style={styles.close_icon} source="icon-close" />
            </Button>
            <View style={styles.container}>
              <View style={styles.header}>
                <Text style={styles.title}>Select location</Text>
              </View>

              <CustomScrollbars autoHide={true} ref={(ref) => (this._scrollView = ref)}>
                <View>
                  <Text style={styles.subtitle}>
                    While connected, your real location is masked with a private and secure location
                    in the selected region
                  </Text>

                  {this.props.settings.relayLocations.map((relayCountry) => {
                    return this._renderCountry(relayCountry);
                  })}
                </View>
              </CustomScrollbars>
            </View>
          </View>
        </Container>
      </Layout>
    );
  }

  _isSelected(selectedLocation: RelayLocation) {
    const { relaySettings } = this.props.settings;
    if (relaySettings.normal) {
      const otherLocation = relaySettings.normal.location;

      if (
        selectedLocation.country &&
        otherLocation.country &&
        selectedLocation.country === otherLocation.country
      ) {
        return true;
      }

      if (Array.isArray(selectedLocation.city) && Array.isArray(otherLocation.city)) {
        const selectedCity = selectedLocation.city;
        const otherCity = otherLocation.city;

        return (
          selectedCity.length === otherCity.length &&
          selectedCity.every((v, i) => v === otherCity[i])
        );
      }
    }
    return false;
  }

  _toggleCollapse = (countryCode: string) => {
    this.setState((state) => {
      const expanded = state.expanded.slice();
      const index = expanded.indexOf(countryCode);
      if (index === -1) {
        expanded.push(countryCode);
      } else {
        expanded.splice(index, 1);
      }
      return { expanded };
    });
  };

  _relayStatusIndicator(active: boolean, isSelected: boolean) {
    const statusClass = active ? styles.relay_status__active : styles.relay_status__inactive;

    return isSelected ? (
      <Img style={styles.tick_icon} source="icon-tick" height={24} width={24} />
    ) : (
      <View style={[styles.relay_status, statusClass]} />
    );
  }

  _renderCountry(relayCountry: RelayLocationRedux) {
    const isSelected = this._isSelected({ country: relayCountry.code });

    // either expanded by user or when the city selected within the country
    const isExpanded = this.state.expanded.includes(relayCountry.code);

    const handleSelect =
      relayCountry.hasActiveRelays && !isSelected
        ? () => {
            this.props.onSelect({ country: relayCountry.code });
          }
        : undefined;

    const handleCollapse = (e) => {
      this._toggleCollapse(relayCountry.code);
      e.stopPropagation();
    };

    return (
      <View key={relayCountry.code} style={styles.country}>
        <CellButton
          cellHoverStyle={isSelected ? styles.cell_selected : null}
          style={isSelected ? styles.cell_selected : styles.cell}
          onPress={handleSelect}
          disabled={!relayCountry.hasActiveRelays}
          testName="country">
          {this._relayStatusIndicator(relayCountry.hasActiveRelays, isSelected)}

          <Label>{relayCountry.name}</Label>

          {relayCountry.cities.length > 1 ? (
            <Img
              style={styles.collapse_button}
              hoverStyle={styles.expand_chevron_hover}
              onPress={handleCollapse}
              source={isExpanded ? 'icon-chevron-up' : 'icon-chevron-down'}
              height={24}
              width={24}
            />
          ) : null}
        </CellButton>

        {relayCountry.cities.length > 1 && (
          <Accordion height={isExpanded ? 'auto' : 0}>
            {relayCountry.cities.map((relayCity) => this._renderCity(relayCountry.code, relayCity))}
          </Accordion>
        )}
      </View>
    );
  }

  _renderCity(countryCode: string, relayCity: RelayLocationCityRedux) {
    const relayLocation: RelayLocation = { city: [countryCode, relayCity.code] };

    const isSelected = this._isSelected(relayLocation);

    const onRef = isSelected
      ? (element) => {
          this._selectedCell = element;
        }
      : undefined;

    const handleSelect =
      relayCity.hasActiveRelays && !isSelected
        ? () => {
            this.props.onSelect(relayLocation);
          }
        : undefined;

    return (
      <CellButton
        key={`${countryCode}_${relayCity.code}`}
        onPress={handleSelect}
        disabled={!relayCity.hasActiveRelays}
        cellHoverStyle={isSelected ? styles.sub_cell__selected : null}
        style={isSelected ? styles.sub_cell__selected : styles.sub_cell}
        testName="city"
        ref={onRef}>
        {this._relayStatusIndicator(relayCity.hasActiveRelays, isSelected)}

        <Label>{relayCity.name}</Label>
      </CellButton>
    );
  }
}