import React, { Component } from 'react';
import { Tab } from '@icedesign/base';
import { withRouter } from 'react-router';
import './MaterialsPage.less';

const TabPane = Tab.TabPane;

@withRouter
export default class extends Component {
  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    let activeKey = 'block';
    if (/component/.test(props.location.pathname)) {
      activeKey = 'comp';
    } else if (/layout/.test(props.location.pathname)) {
      activeKey = 'layout';
    } else if (/scaffold/.test(props.location.pathname)) {
      activeKey = 'scaffold';
    }
    this.state = {
      activeKey,
    };
  }

  handleTabChange = (tab) => {
    switch (tab) {
      case 'comp':
        this.props.router.push('/component/button');
        break;
      case 'block':
        this.props.router.push('/block');
        break;
      case 'layout':
        this.props.router.push('/layout');
        break;
      case 'scaffold':
        this.props.router.push('/scaffold');
        break;
    }
    this.setState({ activeKey: tab });
  };

  render() {
    const { activeKey } = this.state;
    return (
      <div className="materials-page">
        {/* <Tab */}
          {/* className="materials-tab" */}
          {/* activeKey={activeKey} */}
          {/* onChange={this.handleTabChange} */}
        {/* > */}
          {/* <TabPane key={'block'} tab={'区块'} /> */}
          {/* <TabPane key={'layout'} tab={'布局'} /> */}
          {/* <TabPane key={'scaffold'} tab={'模板'} /> */}
          {/* <TabPane key={'comp'} tab={'组件'} /> */}
        {/* </Tab> */}
        {this.props.children}
      </div>
    );
  }
}