/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Button from 'nuke-button';
import Picker from 'nuke-web-picker';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const data0 = [
  { key: 'complex', value: '综合排序' },
  { key: 'sale', value: '销量优先' },
  { key: 'distance', value: '距离最近' },
  { key: 'credit', value: '信用优先' },
];
const data1 = [
  {
    value: '浙江',
    key: 'zhejiang',
    children: [
      {
        value: '杭州',
        key: '310000',
      },
      {
        value: '宁波',
        key: '315000',
      },
    ],
  },
  {
    value: '江苏',
    key: 'jiangsu',
    children: [
      {
        value: '南京',
        key: '210000',
      },
      {
        value: '无锡',
        key: '214000',
      },
      {
        value: '镇江',
        key: '212000',
      },
    ],
  },
];

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();

    this.state = {
      data: '',
      selected: 'complex',
      cascadeProvince: 'jiangsu',
      cascadeCity: '210000',
    };
  }

  componentDidMount() {
    Picker.show(
      {
        title: 'Please select',
        dataSource: data0,
        selectedKey: this.state.selected,
        hasToolbar: true,
        hasToolbarButton: true,
        renderMask: false,
        container: this.refs.pickerRoot,
        style: {
          left: 'auto',
          position: 'initial',
          bottom: 'auto',
          width: '100%',
        },
      },
      (result) => {},
      (e) => {
        console.log('canceled');
      }
    );
    // this.refs.picker.wrappedInstance.show();
  }

  render() {
    const pickerProps = {
      title: '请选择',
      dataSource: data0,
      selectedKey: this.state.selected,
      hasToolbar: true,
      hasToolbarButton: true,
    };
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="普通样式">
            <Demo>
              <DemoItem direction="column">
                <View
                  ref="pickerRoot"
                  style={{ height: 600, backgroundColor: '#cccccc' }}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};

const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  resultText: {
    fontSize: '28rem',
  },
  btns: {
    margin: '30rem',
  },
  btn: {
    marginBottom: '30rem',
  },
};

window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};

renderDemo('en-us', window.THEME_VARIABLE);

initDemo('web-picker');