content: import React from 'react';
  import { resolve } from '../styles';
  
  export default class ViewMaster extends React.Component {
    static displayName = 'ViewMaster';
    static propTypes={
      classes: React.PropTypes.object,
      items: React.PropTypes.object,
    };
  
    constructor(props) {
      super(props);
      this.state = {
        selected: 0,
      };
      window.addEventListener('resize', this.resize);
    }
    componentDidMount() {
      this.resize();
    }
  
    resize = () => {
      const element = this.viewMaster.getBoundingClientRect();
      const width = ~~(element.width);
      const height = ~~(element.height);
      if (width !== this.state.width || height !== this.state.height) {
        this.setState({
          width,
          height,
        });
      }
    };
  
    handleClick = (event, index) => {
      event.stopPropagation();
      const setSlide = index === this.state.selected ? null : index;
      this.setState({
        selected: setSlide,
      });
    };
  /* eslint react/jsx-no-bind: 0 */
    processSlides = (config) => {
      const { classes } = this.props;
      const { slides } = config;
      const windows = slides.map((item, index) => {
        const isOpen = this.state.selected;
        return (
          <li key = {`key${index}`}
            {...resolve(this.props, 'slide', isOpen === index ? 'open' : '', index % 2 === 0 ? 'other' : '')}
            style={{ width: `${this.state.width}px`, height: `${this.state.height}px` }}
          >
            <h4 className={classes.label}>{item.name}</h4>
            <div className={classes.frame}>{item.child}</div>
          </li>
        );
      });
      const inlineStyle = {
        width: `${(this.state.width + 10) * slides.length}px`,
        left: `-${this.state.selected * this.state.width}px`,
      };
      return (
        <ul className={classes.content} ref={(ref) => this.viewContent = ref}
          style={inlineStyle}
        >
         {windows}
        </ul>
      );
    };
    processBullets = (config) => {
      const { classes } = this.props;
      const { slides } = config;
      const bullets = slides.map((item, index) => {
        const isOpen = this.state.selected;
        return (
          <li key = {`key${index}`}>
            <a href="#"
              {...resolve(this.props, 'bullet', isOpen === index ? 'active' : '')}
              onClick = {(event) => {this.handleClick(event, index);}}
            >{index}</a>
          </li>
        );
      });
      return (
        <ul className={classes.bullets}>
         {bullets}
        </ul>
      );
    };
    updateSlides = (value) => {
      const { items } = this.props;
      const offSetX = (value *
        (this.state.width * (items.slides.length - 1) / this.state.width));
      this.viewContent.style.left = `${0 - offSetX}px`;
    }
    render() {
      const { classes, items } = this.props;
      const slides = this.processSlides(items);
      const bullets = this.processBullets(items);
      return (
        <div className={classes.masterFrame}>
          <div className={classes.viewMaster} ref={(ref) => this.viewMaster = ref}>
            {slides}
          </div>
          {bullets}
        </div>
      );
    }
  }
  