function camelCase(str) {
  return str.replace(/[ -]+(\w)/g, (match, char) => char.toUpperCase());
}

function makeCode({name, code}) {
  return `static const IconData ${camelCase(name)} = IconData(0${code.substr(2, 5)}, fontFamily: 'antd-icons');\n`;
}

Array
  .from(document.querySelectorAll('.unicode .dib'))
  .map(element => {
    return {
      name: element.querySelector('.name').innerText,
      code: element.querySelector('.code-name').innerText
    };
  })
  .map(makeCode)
  .join('\n');

export class DraggableCalendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      calendarData: this._genCalendarData()
    };
  }

  _genCalendarData({fullDateRange, availableDateRange, maxDays}) {

    let startDate, endDate, availableStartDate, availableEndDate;

    // if the exact dateRange is given, use availableDateRange; or render [today, today + maxDays]
    if(fullDateRange) {
      [startDate, endDate] = fullDateRange;
      [availableStartDate, availableEndDate] = availableDateRange;
    } else {
      const today = Helper.parseDate(new Date(), 'yyyy-MM-dd');
      availableStartDate = today;
      availableEndDate = Helper.addDay(today, maxDays);
      startDate = new Date(new Date(today).setDate(1));
      endDate = Helper.getLastDayOfMonth(availableEndDate.getFullYear(), availableEndDate.getMonth());
    }

    // TODO: realize _genDayData function
    return this._genDayData({startDate, endDate, availableStartDate, availableEndDate});
  }

  // ...
}

const DAY_STATUS = {
  NONE: 0,
  SINGLE_CHOSEN: 1,
  RANGE_BEGIN_CHOSEN: 2,
  RANGE_MIDDLE_CHOSEN: 3,
  RANGE_END_CHOSEN: 4
};

_genDayData({startDate, endDate, availableStartDate, availableEndDate}) {

  let result = {}, curDate = new Date(startDate);

  while(curDate <= endDate) {

    // use `year-month` as the unique identifier
    const identifier = Helper.formatDate(curDate, 'yyyy-MM');

    // if it is the first day of a month, init it with an array
    // Note: there are maybe several empty days at the first of each month
    if(!result[identifier]) {
      result[identifier] = [...(new Array(curDate.getDay() % 7).fill({}))];
    }

    // save each day's data into result
    result[identifier].push({
      date: curDate,
      status: DAY_STATUS.NONE,
      available: (curDate >= availableStartDate && curDate <= availableEndDate)
    });

    // curDate + 1
    curDate = Helper.addDay(curDate, 1);
  }

  // there are several empty days in each month
  Object.keys(result).forEach(key => {
    const len = result[key].length;
    result[key].push(...(new Array((7 - len % 7) % 7).fill({})));
  });

  return result;
}

export class DraggableCalendar extends Component {

  // ...

  _renderHeader() {
    const {headerContainerStyle, headerTextStyle} = this.props;
    return (
      <View style={[styles.headerContainer, headerContainerStyle]}>
        {['日', '一', '二', '三', '四', '五', '六'].map(item => (
          <Text key={item} style={[styles.headerText, headerTextStyle]}>{item}</Text>
        ))}
      </View>
    );
  }

  _renderBody() {
    const {calendarData} = this.state;
    return (
      <ScrollView>
        {Object
          .keys(calendarData)
          .map((key, index) => this._renderMonth({identifier: key, data: calendarData[key], index}))
        }
      </ScrollView>
    );
  }

  _renderMonth({identifier, data, index}) {
    return [
      this._renderMonthHeader({identifier}),
      this._renderMonthBody({identifier, data, index})
    ];
  }

  _renderMonthHeader({identifier}) {
    const {monthHeaderStyle, renderMonthHeader} = this.props;
    const [year, month] = identifier.split('-');
    return (
      <View key={`month-header-${identifier}`}>
        {renderMonthHeader ?
          renderMonthHeader(identifier) :
          <Text style={[styles.monthHeaderText, monthHeaderStyle]}>{`${parseInt(year)}年${parseInt(month)}月`}</Text>
        }
      </View>
    );
  }

  _renderMonthBody({identifier, data, index}) {
    return (
      <FlatList
        ref={_ => this._refs['months'][index] = _}
        data={data}
        numColumns={7}
        bounces={false}
        key={`month-body-${identifier}`}
        keyExtractor={(item, index) => index}
        renderItem={({item, index}) => this._renderDay(item, index)}
      />
    );
  }

  _renderDay(item, index) {
    const {
      renderDay, dayTextStyle, selectedDayTextStyle, dayContainerStyle,
      singleDayContainerStyle, beginDayContainerStyle, middleDayContainerStyle, endDayContainerStyle
    } = this.props;
    let usedDayTextStyle = [styles.dayText, dayTextStyle];
    let usedDayContainerStyle = [styles.dayContainer, dayContainerStyle];
    if(item.status !== DAY_STATUS.NONE) {
      const containerStyleMap = {
        1: [styles.singleDayContainer, singleDayContainerStyle],
        2: [styles.beginDayContainer, beginDayContainerStyle],
        3: [styles.middleDayContainer, middleDayContainerStyle],
        4: [styles.endDayContainer, endDayContainerStyle]
      };
      usedDayTextStyle.push(styles.selectedDayText, selectedDayTextStyle);
      usedDayContainerStyle.push(...(containerStyleMap[item.status] || {}));
    }
    return (
      <View key={`day-${index}`} style={{flex: 1}}>
        {renderDay ?
          renderDay(item, index) :
          <View style={usedDayContainerStyle}>
            {item.date && (
              <Text style={[...usedDayTextStyle, !item.available && {opacity: .6}]}>
                {item.date.getDate()}
              </Text>
            )}
          </View>
        }
      </View>
    );
  }

  render() {
    const {style} = this.props;
    return (
      <View style={[styles.container, style]}>
        {this._renderHeader()}
        {this._renderBody()}
      </View>
    );
  }
}

export class DraggableCalendar extends Component {

  constructor(props) {
    // ...
    this._monthRefs = [];
    this._dayLayouts = {};
  }

  componentDidMount() {
    Helper.waitFor(0).then(() => this._genLayouts());
  }

  _getRefLayout(ref) {
    return new Promise(resolve => {
      UIManager.measure(findNodeHandle(ref), (x, y, width, height, pageX, pageY) => {
        resolve({x, y, width, height, pageX, pageY});
      });
    });
  }

  _genDayLayout(identifier, layout) {

    // according to the identifier, find the month data from calendarData
    const monthData = this.state.calendarData[identifier];

    // extract info from layout, and calculate the width and height for each day item
    const {x, y, width, height} = layout;
    const ITEM_WIDTH = width / 7, ITEM_HEIGHT = height / (monthData.length / 7);

    // calculate the layout for each day item
    const dayLayouts = {};
    monthData.forEach((data, index) => {
      if(data.date) {
        dayLayouts[Helper.formatDate(data.date, 'yyyy-MM-dd')] = {
          x: x + (index % 7) * ITEM_WIDTH,
          y: y + parseInt(index / 7) * ITEM_HEIGHT,
          width: ITEM_WIDTH,
          height: ITEM_HEIGHT
        };
      }
    });

    // save dayLayouts into this._layouts.days
    Object.assign(this._dayLayouts, dayLayouts);
  }

  _genLayouts() {
    // after rendering scrollView and months, generates the layout params for each day item.
    Promise
      .all(this._monthRefs.map(ref => this._getRefLayout(ref)))
      .then((monthLayouts) => {
        // according to the month's layout, calculate each day's layout
        monthLayouts.forEach((monthLayout, index) => {
          this._genDayLayout(Object.keys(this.state.calendarData).sort()[index], monthLayout);
        });
        console.log(Object.keys(this._dayLayouts).map(key => this._dayLayouts[key].y));
      });
  }

  _renderMonthBody({identifier, data, index}) {
    return (
      <FlatList
        ref={_ => this._monthRefs[index] = _}
        data={data}
        numColumns={7}
        bounces={false}
        key={`month-body-${identifier}`}
        keyExtractor={(item, index) => index}
        renderItem={({item, index}) => this._renderDay(item, index)}
      />
    );
  }

  // ...
}

export class DraggableCalendar extends Component {

  constructor(props) {

    // ...

    this._scrollY = 0;
    this._panResponder = {};

    this._onScroll = this._onScroll.bind(this);
  }

  componentWillMount() {
    this._initPanResponder();
  }

  _initPanResponder() {
    // TODO
  }

  _genDraggableAreaStyle(date) {
    if(!date) {
      return null;
    } else {
      if(Helper.isEmptyObject(this._dayLayouts)) {
        return null;
      } else {
        const {x, y, width, height} = this._dayLayouts[Helper.formatDate(date, 'yyyy-MM-dd')];
        return {left: x, top: y - this._scrollY, width, height};
      }
    }
  }

  _onScroll(e) {
    this._scrollY = Helper.getValue(e, 'nativeEvent:contentOffset:y', this._scrollY);
    clearTimeout(this.updateTimer);
    this.updateTimer = setTimeout(() => {
      this.forceUpdate();
    }, 100);
  }

  _renderBody() {
    const {calendarData} = this.state;
    return (
      <View style={styles.bodyContainer}>
        <ScrollView scrollEventThrottle={1} onScroll={this._onScroll}>
          {Object
            .keys(calendarData)
            .map((key, index) => this._renderMonth({identifier: key, data: calendarData[key], index}))
          }
        </ScrollView>
        {this._renderDraggableArea()}
      </View>
    );
  }

  _renderDraggableArea() {
    const {startDate, endDate} = this.state;
    if(!startDate || !endDate) {
      return null;
    } else {
      const isSingleChosen = startDate.getTime() === endDate.getTime();
      return [
        <View
          key={'drag-start'}
          {...this._panResponder.panHandlers}					style={[styles.dragContainer, this._genDraggableAreaStyle(startDate)]}
        />,
        <View
          key={'drag-end'}
          {...this._panResponder.panHandlers}
          style={[styles.dragContainer, this._genDraggableAreaStyle(endDate), isSingleChosen && {height: 0}]}
        />
      ];
    }
  }

  // ...
}

export class DraggableCalendar extends Component {

  constructor(props) {
    // ...

    this.state = {
      startDate: new Date(2018, 5, 7, 0, 0, 0),
      endDate: new Date(2018, 5, 10, 0, 0, 0),
      calendarData: this._genCalendarData({fullDateRange, availableDateRange, maxDays})
    };

    this._touchPoint = {};

    this._onPanGrant = this._onPanGrant.bind(this);
    this._onPanMove = this._onPanMove.bind(this);
    this._onPanRelease = this._onPanRelease.bind(this);
  }

  _initPanResponder() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: this._onPanGrant,
      onPanResponderMove: this._onPanMove,
      onPanResponderRelease: this._onPanRelease
    });
  }

  _onPanGrant(evt) {
    // save the initial position
    const {locationX, locationY} = evt.nativeEvent;
    this._touchPoint.x = locationX;
    this._touchPoint.y = locationY;
  }

  _onPanMove(evt, gesture) {

    // save the delta offset
    const {dx, dy} = gesture;
    this._touchPoint.dx = dx;
    this._touchPoint.dy = dy;

    // console for test
    console.log('(x, y):', this._touchPoint.x + dx, this._touchPoint.y + dy);
  }

  _onPanRelease() {
    // clear the saved info
    this._touchPoint = {};
  }

  // ...
}

export class DraggableCalendar extends Component {

  constructor(props) {
    // ...
    this._pressEnd = false;
    this._pressStart = false;
  }

  _onTouchStart(type, date) {
    const pressMap = {start: '_pressStart', end: '_pressEnd'};
    this[pressMap[type]] = true;
    if(this._pressStart || this._pressEnd) {
      const dateStr = Helper.formatDate(date, 'yyyy-MM-dd');
      this._touchPoint.x += Helper.getValue(this, `_dayLayouts:${dateStr}:x`, 0);
      this._touchPoint.y += Helper.getValue(this, `_dayLayouts:${dateStr}:y`, 0);
    }
  }

  _renderDraggableArea() {
    const {startDate, endDate} = this.state;
    if(!startDate || !endDate) {
      return null;
    } else {
      const isSingleChosen = startDate.getTime() === endDate.getTime();
      return [
        <View
          key={'drag-start'}
          {...this._panResponder.panHandlers}
          onTouchStart={() => this._onTouchStart('start', startDate)}
          style={[styles.dragContainer, this._genDraggableAreaStyle(startDate)]}
        />,
        <View
          key={'drag-end'}
          {...this._panResponder.panHandlers}
          onTouchStart={() => this._onTouchStart('end', endDate)}
          style={[styles.dragContainer, this._genDraggableAreaStyle(endDate), isSingleChosen && {height: 0}]}
        />
      ];
    }
  }

  // ...
}

// Helper.js
export const Helper = {
  // ...
  positionToDate(position, dayLayouts) {
    let date = null;
    Object.keys(dayLayouts).forEach(key => {
      const {x, y} = position, layout = dayLayouts[key];
      if(
        x >= layout.x &&
        x <= layout.x + layout.width &&
        y >= layout.y &&
        y <= layout.y + layout.height
      ) {
        date = Helper.parseDate(key);
      }
    });
    return date;
  }
}

// DraggableCalendar.js
export class DraggableCalendar extends Component {
  // ...
  _onPanMove(evt, gesture) {
    // ...
    // for test
    console.log('cur date:', Helper.positionToDate({x: this._touchPoint.x + dx, y: this._touchPoint.y + dy}, this._dayLayouts));
  }
}

// Helper.js
export const Helper = {
  getDayStatus(date, selectionRange = []) {

    let status = DAY_STATUS.NONE;
    const [startDate, endDate] = selectionRange;

    if(!startDate || !endDate) {
      return status;
    }

    if(startDate.getTime() === endDate.getTime()) {
      if(date.getTime() === startDate.getTime()) {
        return DAY_STATUS.SINGLE_CHOSEN;
      }
    } else {
      if(date.getTime() === startDate.getTime()) {
        return DAY_STATUS.RANGE_BEGIN_CHOSEN;
      } else if(date > startDate && date < endDate) {
        return DAY_STATUS.RANGE_MIDDLE_CHOSEN;
      } else if(date.getTime() === endDate.getTime()) {
        return DAY_STATUS.RANGE_END_CHOSEN;
      }
    }

    return status;
  }
};

// DraggableCalendar.js
export class DraggableCalendar extends Component {

  _updateDayStatus(selectionRange) {

    const {calendarData} = this.state;
    Object.keys(calendarData).forEach(key => {

      // set a flag: if status has changed, it means this month should be re-rendered.
      let hasChanged = false;
      calendarData[key].forEach(dayData => {
        if(dayData.date) {
          const newDayStatus = Helper.getDayStatus(dayData.date, selectionRange);
          if(dayData.status !== newDayStatus) {
            hasChanged = true;
            dayData.status = newDayStatus;
          }
        }
      });

      // as monthBody is FlatList, the data should be two objects. Or it won't be re-rendered
      if(hasChanged) {
        calendarData[key] = Object.assign([], calendarData[key]);
      }
    });

    this.setState({calendarData});
  }

  _updateSelection() {

    const {x, dx, y, dy} = this._touchPoint;
    const touchingDate = Helper.positionToDate({x: x + dx, y: y + dy}, this._dayLayouts);

    // if touchingDate doesn't exist, return
    if(!touchingDate) return;

    // generates new selection dateRange
    let newSelection = [], {startDate, endDate} = this.state;
    if(this._pressStart && touchingDate.getTime() !== startDate.getTime()) {
      if(touchingDate <= endDate) {
        newSelection = [touchingDate, endDate];
      } else {
        this._pressStart = false;
        this._pressEnd = true;
        newSelection = [endDate, touchingDate];
      }
    } else if(this._pressEnd && touchingDate.getTime() !== endDate.getTime()) {
      if(touchingDate >= startDate) {
        newSelection = [startDate, touchingDate];
      } else {
        this._pressStart = true;
        this._pressEnd = false;
        newSelection = [touchingDate, startDate];
      }
    }

    // if selection dateRange changes, update it
    if(newSelection.length > 0) {
      this._updateDayStatus(newSelection);
      this.setState({startDate: newSelection[0], endDate: newSelection[1]});
    }
  }

  _onPanMove(evt, gesture) {
    // ...
    this._updateSelection();
  }
}

// MonthHeader.js
export class MonthHeader extends PureComponent {
  render() {
    const {identifier, monthHeaderTextStyle, renderMonthHeader} = this.props;
    const [year, month] = identifier.split('-');
    return (
      <View>
        {renderMonthHeader ?
          renderMonthHeader(identifier) :
          <Text style={[styles.monthHeaderText, monthHeaderTextStyle]}>
            {`${parseInt(year)}年${parseInt(month)}月`}
          </Text>
        }
      </View>
    );
  }
}

// DraggableCalendar.js
export class DraggableCalendar extends Component {
  // ...
  _renderMonthHeader({identifier}) {
    const {monthHeaderTextStyle, renderMonthHeader} = this.props;
    return (
      <MonthHeader
        key={identifier}
        identifier={identifier}
        monthHeaderTextStyle={monthHeaderTextStyle}
        renderMonthHeader={renderMonthHeader}
      />
    );
  }
}

// Day.js
export class Day extends PureComponent {

  _genStyle() {
    const {
      data, dayTextStyle, selectedDayTextStyle,
      dayContainerStyle, singleDayContainerStyle,
      beginDayContainerStyle, middleDayContainerStyle, endDayContainerStyle
    } = this.props;
    const usedDayTextStyle = [styles.dayText, dayTextStyle];
    const usedDayContainerStyle = [styles.dayContainer, dayContainerStyle];
    if(data.status !== DAY_STATUS.NONE) {
      const containerStyleMap = {
        1: [styles.singleDayContainer, singleDayContainerStyle],
        2: [styles.beginDayContainer, beginDayContainerStyle],
        3: [styles.middleDayContainer, middleDayContainerStyle],
        4: [styles.endDayContainer, endDayContainerStyle]
      };
      usedDayTextStyle.push(styles.selectedDayText, selectedDayTextStyle);
      usedDayContainerStyle.push(...(containerStyleMap[data.status] || {}));
    }
    return {usedDayTextStyle, usedDayContainerStyle};
  }

  render() {
    const {data, renderDay} = this.props;
    const {usedDayTextStyle, usedDayContainerStyle} = this._genStyle();
    return (
      <View style={{flex: 1}}>
        {renderDay ?
          renderDay(data) :
          <View style={usedDayContainerStyle}>
            {data.date && (
              <Text style={[...usedDayTextStyle, !data.available && {opacity: .6}]}>
                {data.date.getDate()}
              </Text>
            )}
          </View>
        }
      </View>
    );
  }
}

// DraggableCalendar.js
export class DraggableCalendar extends Component {
  // ...
  _renderDay(item, index) {
    const styleKeys = [
      'dayTextStyle', 'selectedDayTextStyle',
      'dayContainerStyle', 'singleDayContainerStyle',
      'beginDayContainerStyle', 'middleDayContainerStyle', 'endDayContainerStyle'
    ];
    return (
      <Day
        key={`day-${index}`}
        data={item}
        status={item.status}
        {...styleKeys.map(key => this.props[key])}
      />
    );
  }
}

// Helper.js
export const Helper = {
  // ...
  arrayTransform(arr = []) {

    if(arr.length === 0) return [];

    let result = [[]], lastY = arr[0].y;
    for(let i = 0, count = 0; i < arr.length; i++) {
      if(arr[i].y === lastY) {
        result[count].push(arr[i]);
      } else {
        lastY = arr[i].y;
        result[++count] = [arr[i]];
      }
    }

    return result;
  },
  buildIndexItem({identifier, dayLayouts, left, right}) {
    const len = dayLayouts.length;
    return {
      identifier,
      boundary: {
        left, right, upper: dayLayouts[0].y,
        lower: dayLayouts[len - 1].y + dayLayouts[len - 1].height
      },
      dayLayouts: Helper.arrayTransform(dayLayouts.map((item, index) => {
        const date = `${identifier}-${index + 1}`;
        if(index === 0){
          return Object.assign({date}, item, {x: left, width: item.x + item.width - left});
        } else if (index === len - 1) {
          return Object.assign({date}, item, {width: right - item.x});
        } else {
          return Object.assign({date}, item);
        }
      }))
    };
  }
};

// DraggableCalendar.js
export class DraggableCalendar extends Component {

  constructor(props) {
    // ...
    this._dayLayoutsIndex = [];
  }

  _genDayLayout(identifier, layout) {
    // ...
    // build the index for days' layouts to speed up transforming (x, y) to date
    this._dayLayoutsIndex.push(Helper.buildIndexItem({
      identifier, left: x, right: x + width,
      dayLayouts: Object.keys(dayLayouts).map(key => dayLayouts[key])
    }));
  }

  // ...
}

// Helper.js
export const Helper = {
  binarySearch(data=[], comparedObj, comparedFunc) {

    let start = 0;
    let end = data.length - 1;
    let middle;

    let compareResult;
    while(start <= end) {
      middle = Math.floor((start + end) / 2);
      compareResult = comparedFunc(data[middle], comparedObj);
      if(compareResult < 0) {
        end = middle - 1;
      } else if(compareResult === 0) {
        return data[middle];
      } else {
        start = middle + 1;
      }
    }

    return undefined;
  },
  positionToDate(position, dayLayoutsIndex) {

    // 1. use binary search to find the monthIndex
    const monthData = Helper.binarySearch(dayLayoutsIndex, position, (cur, compared) => {
      if(compared.y < cur.boundary.upper) {
        return -1;
      } else if(compared.y > cur.boundary.lower) {
        return 1;
      } else {
        return 0;
      }
    });

    // 2. use binary search to find the rowData
    if(monthData === undefined) return null;
    const rowData = Helper.binarySearch(monthData.dayLayouts, position, (cur, compared) => {
      if(compared.y < cur[0].y) {
        return -1;
      } else if(compared.y > cur[0].y + cur[0].height) {
        return 1;
      } else {
        return 0;
      }
    });

    // 3. use binary search to find the result
    if(rowData === undefined) return null;
    const result = Helper.binarySearch(rowData, position, (cur, compared) => {
      if(compared.x < cur.x) {
        return -1;
      } else if(compared.x > cur.x + cur.width) {
        return 1;
      } else {
        return 0;
      }
    });

    // 4. return the final result
    return result !== undefined ? Helper.parseDate(result.date) : null;
  }
  // ...
};

class BreathLoading extends React.PureComponent {

  componentWillMount() {
    this._initAnimation();
    this._playAnimation();
  }

  componentWillUnmount() {
    this._stopAnimation();
  }

  _initAnimation() {
    this.oritention = true;
    this.isAnimating = true;
    this.opacity = new Animated.Value(1);
  }

  _playAnimation() {
    Animated.timing(this.opacity, {
      isInteraction: false,
      duration: params.duration,
      toValue: this.oritention ? 0.2 : 1,
      easing: this.oritention ? Easing.in : Easing.easeOut
    }).start(() => {
      this.oritention = !this.oritention;
      this.isAnimating && this._playAnimation();
    });
  }

  _stopAnimation = () => this.isAnimating = false;

  render = () => <Animated.View style={{opacity: this.opacity, width: 100, height: 50, backgroundColor: '#EFEFEF'}}/>;

}

class BreathLoading extends React.PureComponent {
  // ...省略
  render() {
    const {renderContent = () => {}} = this.props;
    return renderContent(this.opacity);
  }
}

@WithLoading()
class Test extends React.PureComponent {
  render() {
    const {opacity} = this.props;
    return (
      <View style={{marginTop: 40, paddingHorizontal: 20}}>
        <View style={{marginTop: 20, flexDirection: 'row', justifyContent: 'space-between'}}>
          <Animated.View style={{opacity, backgroundColor: '#EFEFEF', width: 150, height: 20}}/>
          <Animated.View style={{opacity, backgroundColor: '#EFEFEF', width: 150, height: 20}}/>
        </View>
        <View style={{marginTop: 20, flexDirection: 'row', justifyContent: 'space-between'}}>
          <Animated.View style={{opacity, backgroundColor: '#EFEFEF', width: 150, height: 20}}/>
          <Animated.View style={{opacity, backgroundColor: '#EFEFEF', width: 150, height: 20}}/>
        </View>
      </View>
    )
  }
}

class X extends Page {

  state = {
    list: []
  };

  componentDidMount() {
    this._fetchData();
  }

  _fetchData = () => setTimeout(() => this.setState({list: [1,2,3]}), 2000);

  onClickHeader = () => console.log('click header');
  
  onClickBody = () => console.log('click body');
  
  onClickFooter = () => console.log('click footer');

  _renderHeader = () => <Header onClick={this.onClickHeader}/>;

  _renderBody = () => <Body data={this.state.list} onClick={this.onClickBody}/>;

  _renderFooter = () => <Footer onClick={this.onClickFooter}/>;

  render = () => (
    <View>
      {this._renderHeader()}
      {this._renderBody()}
      {this._renderFooter()}
    </View>
  );
}

class X extends Page {

  // ...省略

  _renderHeaderA = () => <HeaderA onClick={this.onClickHeader}/>;

  _renderBodyA = () => <BodyA data={this.state.list} onClick={this.onClickBody}/>;

  _renderFooterA = () => <FooterA onClick={this.onClickFooter}/>;

  _renderHeaderB = () => <HeaderB onClick={this.onClickHeader}/>;

  _renderBodyB = () => <BodyB data={this.state.list} onClick={this.onClickBody}/>;

  _renderFooterB = () => <FooterB onClick={this.onClickFooter}/>;

  render = () => {
    const {version} = this.props;
    return version === 1 ? (
      <View>
        {this._renderHeaderA()}
        {this._renderBodyA()}
        {this._renderFooterA()}
      </View>
    ) : (
      <View>
        {this._renderHeaderB()}
        {this._renderBodyB()}
        {this._renderFooterB()}
      </View>
    );
  }
}

chrome.tabs.query({}, tabs => console.log(tabs));

chrome.tabs.query(
  {active: true, currentWindow: true},
  tabs => console.log(tabs[0])
);

chrome.tabs.highlight({windowId, tabs});

chrome.windows.update(windowId, {focused: true});

chrome.tabs.remove(tabId);

class App extends React.PureComponent {

  state = {
    tabsData: [],
    status: STATUS.LOADING
  }

  componentDidMount() {
    this.getTabsData();
  }

  getTabsData() {
    Promise.all([
      this.getAllTabs(),
      this.getCurrentTab(),
      Helper.waitFor(300),
    ]).then(([allTabs, currentTab]) => {
      const tabsData = Helper.convertTabsData(allTabs, currentTab);
      if(tabsData.length > 0) {
        this.setState({tabsData, status: STATUS.OK});
      } else {
        this.setState({tabsData: [], status: STATUS.EXCEPTION});
      }
    }).catch(err => {
      this.setState({tabsData: [], status: STATUS.EXCEPTION});
      console.log('get tabs data failed, the error is:', err.message);
    });
  }

  getAllTabs = () => new Promise(resolve => chrome.tabs.query({}, tabs => resolve(tabs)))

  getCurrentTab = () => new Promise(resolve => chrome.tabs.query({active: true, currentWindow: true}, tabs => resolve(tabs[0])))

  render() {
    const {status, tabsData} = this.state;
    return (
      <div className="app-container">
        <TabsList data={tabsData} status={status}/>
      </div>
    );
  }
}

const Helper = {
  waitFor(timeout) {
    return new Promise(resolve => {
      setTimeout(resolve, timeout);
    });
  },
  convertTabsData() {}
}

convertTabsData(allTabs = [], currentTab = {}) {

  // 过滤非法数据
  if(!(allTabs.length > 0 && currentTab.windowId !== undefined)) {
    return [];
  }

  // 按windowId进行分组归类
  const hash = Object.create(null);
  for(const tab of allTabs) {
    if(!hash[tab.windowId]) {
      hash[tab.windowId] = [];
    }
    hash[tab.windowId].push(tab);
  }

  // 将obj转成array
  const data = [];
  Object.keys(hash).forEach(key => data.push({
    tabs: hash[key],
    windowId: Number(key),
    isCurWindow: Number(key) === currentTab.windowId
  }));

  // 进行排序，将当前窗口的顺序往上提，保证更好的体验
  data.sort((winA, winB) => {
    if(winA.isCurWindow) {
      return -1;
    } else if(winB.isCurWindow) {
      return 1;
    } else {
      return 0;
    }
  });

  return data;
}

export class TabsList extends React.PureComponent {

  renderLoading() {
    return (
      <div className={'loading-container'}>
        <Spin size="large"/>
      </div>
    );
  }

  renderOK() {
    // TODO...
  }

  renderException() {
    return (
      <div className={'no-result-container'}>
        <Empty description={'没有数据哎~'}/>
      </div>
    );
  }

  render() {
    const {status} = this.props;
    switch(status) {
      case STATUS.LOADING:
        return this.renderLoading();
      case STATUS.OK:
        return this.renderOK();
      case STATUS.EXCEPTION:
      default:
        return this.renderException();
    }
  }
}

import React from 'react';
import {Badge} from ' @rn-components-kit/badge';

const TestComponent = () => <Badge/>;

import React from 'react';
import {Badge} from ' @rn-components-kit/badge';

const TestComponent = () => <Badge/>;