import * as React from 'react';
import ReactDOM from 'react-dom';
import { Component, Styles, View } from 'reactxp';
import styled from 'styled-components';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import CustomScrollbars from './CustomScrollbars';
import { Container, Layout } from './Layout';
import {
  BackBarItem,
  NavigationBar,
  NavigationContainer,
  NavigationItems,
  NavigationScrollbars,
  TitleBarItem,
} from './NavigationBar';
import Selector, { ISelectorItem, SelectorCell } from './Selector';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';

interface IProps {
  preferredLocale: string;
  preferredLocalesList: Array<{ name: string; code: string }>;
  setPreferredLocale: (locale: string) => void;
  onClose: () => void;
}

interface IState {
  source: Array<ISelectorItem<string>>;
}

const styles = {
  page: Styles.createViewStyle({
    backgroundColor: colors.darkBlue,
    flex: 1,
  }),
  container: Styles.createViewStyle({
    flex: 1,
  }),
};

const StyledNavigationScrollbars = styled(NavigationScrollbars)({
  flex: 1,
});

const StyledSelector = (styled(Selector)({
  marginBottom: 0,
}) as unknown) as new <T>() => Selector<T>;

export default class SelectLanguage extends Component<IProps, IState> {
  private scrollView = React.createRef<CustomScrollbars>();
  private selectedCellRef = React.createRef<SelectorCell<string>>();

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

    this.state = {
      source: [
        ...this.props.preferredLocalesList.map((item) => ({ label: item.name, value: item.code })),
      ],
    };
  }

  public componentDidMount() {
    this.scrollToSelectedCell();
  }

  public render() {
    return (
      <Layout>
        <Container>
          <View style={styles.page}>
            <NavigationContainer>
              <NavigationBar>
                <NavigationItems>
                  <BackBarItem action={this.props.onClose}>
                    {
                      // TRANSLATORS: Back button in navigation bar
                      messages.pgettext('navigation-bar', 'Settings')
                    }
                  </BackBarItem>
                  <TitleBarItem>
                    {
                      // TRANSLATORS: Title label in navigation bar
                      messages.pgettext('select-language-nav', 'Select language')
                    }
                  </TitleBarItem>
                </NavigationItems>
              </NavigationBar>

              <View style={styles.container}>
                <StyledNavigationScrollbars>
                  <SettingsHeader>
                    <HeaderTitle>
                      {messages.pgettext('select-language-nav', 'Select language')}
                    </HeaderTitle>
                  </SettingsHeader>
                  <StyledSelector
                    title=""
                    values={this.state.source}
                    value={this.props.preferredLocale}
                    onSelect={this.props.setPreferredLocale}
                    selectedCellRef={this.selectedCellRef}
                  />
                </StyledNavigationScrollbars>
              </View>
            </NavigationContainer>
          </View>
        </Container>
      </Layout>
    );
  }

  private scrollToSelectedCell() {
    const ref = this.selectedCellRef.current;
    const scrollView = this.scrollView.current;

    if (scrollView && ref) {
      const cellDOMNode = ReactDOM.findDOMNode(ref);
      if (cellDOMNode instanceof HTMLElement) {
        scrollView.scrollToElement(cellDOMNode, 'middle');
      }
    }
  }
}
