/**
 * Created by baoyinghai on 6/28/17.
 */
import React from 'react';
import { TabTitle, TabContainer } from './tab';
import ARTSetting from './ARTSetting';
import DSSetting from './DSSetting';
import PreviewPage from '../index';

export default class PageFactory extends React.Component {

  static defaultProps = {
    DSC: {
      dataSourceA: {
        c: 2, d: 'd'
      },
      dataSourceB: [
        { a: '1', b: '2' },
        { a: '1', b: '2' }
      ]
    },
    ART: {
      nodeType: 'CONTAINER',
      name: 'LineLayout',
      props: {
        direction: 'column',
      },
      childrenNode: [
        {
          nodeType: 'COMP',
          name: 'Label',
          sourceFrom: 'dataSourceA',
          dataSource: {
            first: {
              vType: 'expression',
              value: '{$c} + 10'
            }
          }
        },
        {
          nodeType: 'COMP',
          name: 'Label',
          sourceFrom: 'dataSourceA',
          dataSource: {
            first: {
              vType: 'key',
              value: 'd'
            }
          }
        },
        {
          nodeType: 'COMP',
          name: 'Label',
          props: {},
        },
        {
          nodeType: 'CONTAINER',
          name: 'LineLayout',
          props: {
            direction: 'row'
          },
          childrenNode: [
            {
              nodeType: 'COMP',
              name: 'Label',
              props: {},
            },
            {
              nodeType: 'COMP',
              name: 'Label',
              props: {},
            },
            {
              nodeType: 'COMP',
              name: 'Label',
              props: {},
            }
          ]
        },
      ]
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      currentPageIndex: 0,
      ...this.props
    };
  }

  _changePageIndex = index => {
    this.setState({
      currentPageIndex: index
    });
  };

  render() {
    return (
      <div>
        <div>
          <TabTitle onClick={() => this._changePageIndex(0)}>渲染树</TabTitle>
          <TabTitle onClick={() => this._changePageIndex(1)}>数据源</TabTitle>
          <TabTitle onClick={() => this._changePageIndex(2)}>预览</TabTitle>
        </div>
        <div style={{ borderTop: '1px solid #666666' }}>
          <TabContainer currentPageIndex={this.state.currentPageIndex} pageIndex={0}>
            <ARTSetting ART={this.state.ART} />
          </TabContainer>
          <TabContainer currentPageIndex={this.state.currentPageIndex} pageIndex={1}>
            <DSSetting DSC={this.state.DSC} />
          </TabContainer>
          <TabContainer currentPageIndex={this.state.currentPageIndex} pageIndex={2}>
            <PreviewPage ART={this.state.ART} DSC={this.state.DSC} />
          </TabContainer>
        </div>
      </div>
    );
  }
}
