// @flow
import * as React from 'react';
import { View } from 'react-native';
import Button from './core/Button';
import withTheme, { type Theme } from './core/withTheme';
// import Text from './core/Text';
import Spacer from './core/Spacer';
import type { NodeType } from './Editor';
import clamp from 'lodash/clamp';
import getFocusableNodes from '../client/getFocusableNodes';

type Node = {|
  object: string,
  type: NodeType,
|};

type BreadcrumbButtonProps = {|
  node: Node,
  index: number,
  onFocus: (index: number) => void,
|};

type BreadcrumbButtonState = {|
  active: boolean,
|};

class BreadcrumbButton extends React.PureComponent<
  BreadcrumbButtonProps,
  BreadcrumbButtonState,
> {
  // TODO: Localize
  static renderLabel(node) {
    if (node.object === 'document') {
      return 'document';
    }
    const type: NodeType = node.type;
    switch (type) {
      case 'paragraph':
        return 'paragraph';
      case 'headingOne':
        return 'heading 1';
      case 'headingTwo':
        return 'heading 2';
      case 'blockquote':
        return 'blockquote';
      case 'list':
        return 'list';
      case 'listItem':
        return 'item';
      case 'link':
        return 'link';
      default:
        // eslint-disable-next-line no-unused-expressions
        (type: empty);
    }
  }

  // handlePress = event => {
  //   // console.log(event.key);
  //   // console.log('f');
  // };

  handleFocus = () => {
    this.props.onFocus(this.props.index);
  };

  render() {
    const { node } = this.props;
    return (
      <Button
        color="gray"
        // onPress={this.handlePress}
        onFocus={this.handleFocus}
      >
        {BreadcrumbButton.renderLabel(node)}
      </Button>
    );
  }
}

type EditorBreadcrumbProps = {|
  // value: Object,
  document: Object,
  // String, to leverage pure shouldComponentUpdate.
  focusPathString: string,
  theme: Theme,
|};

type EditorBreadcrumbState = {|
  focusIndex: number,
|};

class EditorBreadcrumb extends React.PureComponent<
  EditorBreadcrumbProps,
  EditorBreadcrumbState,
> {
  state = {
    focusIndex: 0,
  };

  componentDidMount() {
    this.updateTabIndexesDirectly();
  }

  componentDidUpdate() {
    this.updateTabIndexesDirectly();
  }

  handleButtonFocus = index => {
    this.setState({ focusIndex: index });
  };

  handleViewKeyDown = event => {
    const isLeftRightArrow =
      event.key === 'ArrowLeft' || event.key === 'ArrowRight';
    if (!isLeftRightArrow) return;
    const els = getFocusableNodes(this);
    const offset = event.key === 'ArrowRight' ? 1 : -1;
    const index = clamp(this.state.focusIndex + offset, 0, els.length - 1);
    const el = els[index];
    if (el == null) return;
    el.focus();
  };

  // Handle tabIndex and focus directly without React. It's easier to implement.
  updateTabIndexesDirectly() {
    const els = getFocusableNodes(this);
    const focusIndex = clamp(this.state.focusIndex, 0, els.length - 1);
    els.forEach((el, index) => {
      // eslint-disable-next-line no-param-reassign
      el.tabIndex = focusIndex === index ? 0 : -1;
    });
  }

  render() {
    const { document, focusPathString, theme } = this.props;
    const ancestors = document.getAncestors(focusPathString.split(','));
    return (
      <View
        style={theme.styles.editorBreadcrumb}
        onKeyDown={this.handleViewKeyDown}
      >
        <Spacer rhythm={0.5}>
          {ancestors.map((node, index) => (
            <BreadcrumbButton
              node={node}
              index={index}
              key={node.key}
              onFocus={this.handleButtonFocus}
            />
          ))}
        </Spacer>
      </View>
    );
  }
}

export default withTheme(EditorBreadcrumb);

@@ -533,48 +533,49 @@
 id,%0A
-%7C%7D;%0A%0Atype BreadcrumbButtonState = %7B%7C%0A  a
+  onPress: (index: number) =%3E void,%0A  isA
 ctiv
@@ -642,19 +642,16 @@
 mponent%3C
-%0A  
 Breadcru
@@ -667,35 +667,8 @@
 rops
-,%0A  BreadcrumbButtonState,%0A
 %3E %7B%0A
@@ -1293,19 +1293,16 @@
 %7D%0A  %7D%0A%0A 
- //
  handleP
@@ -1308,29 +1308,26 @@
 Press = 
-event
+()
  =%3E %7B%0A  
 //   // 
@@ -1322,72 +1322,49 @@
 %7B%0A  
-//   // console.log(event.key);%0A  //   // console.log('f'
+  this.props.onPress(this.props.index
 );%0A 
- //
  %7D;%0A
@@ -1465,16 +1465,26 @@
 t %7B node
+, isActive
  %7D = thi
@@ -1537,22 +1537,47 @@
 lor=
-%22
+%7BisActive ? 'primary' : '
 gray
-%22
+'%7D
 %0A       
  // 
@@ -1576,19 +1576,16 @@
     
- //
  onPress
 =%7Bth
@@ -1580,16 +1580,18 @@
  onPress
+In
 =%7Bthis.h
@@ -1947,16 +1947,40 @@
 number,%0A
+  activeIndex: ?number,%0A
 %7C%7D;%0A%0Acla
@@ -2113,16 +2113,39 @@
 dex: 0,%0A
+    activeIndex: null,%0A
   %7D;%0A%0A  
@@ -2293,17 +2293,23 @@
 tton
-Focus = i
+Press = activeI
 ndex
@@ -2336,16 +2336,198 @@
 ate(
+state =%3E %7B%0A      return %7B%0A        activeIndex: state.activeIndex === activeIndex ? null : activeIndex,%0A      %7D;%0A    %7D);%0A  %7D;%0A%0A  handleButtonFocus = focusIndex =%3E %7B%0A    this.setState(
 %7B focusI
 ndex
@@ -2526,15 +2526,8 @@
 cusI
-ndex: i
 ndex
@@ -2559,21 +2559,38 @@
 yDown = 
+(
 event
+: KeyboardEvent)
  =%3E %7B%0A  
@@ -3814,37 +3814,142 @@
   on
-Focus=%7Bthis.handleButtonFocus
+Press=%7Bthis.handleButtonPress%7D%0A              onFocus=%7Bthis.handleButtonFocus%7D%0A              isActive=%7Bthis.state.activeIndex === index
 %7D%0A  

Add EditorBreadcrumb activeIndex