/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Image from 'nuke-image';
import Touchable from 'nuke-touchable';
import Tabbar from 'nuke-tabbar';
import Icon from 'nuke-icon';
import Iconfont from 'nuke-iconfont';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const iconsMap = {
  home: '\ue601',
  cart: '\ue600',
  my: '\ue602',
};

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    Iconfont({
      name: 'tabicons',
      url: '//at.alicdn.com/t/font_3ife2q6deoxkcsor.ttf',
    });
    this.state = {
      activeKey: 'tab1',
    };
    this.renderFirst = this.renderFirst.bind(this);
  }
  renderFirst() {
    const a = 'xx';
    return (
      <View style={[styles.tabContent]}>
        <Tabbar
          itemStyle={{ width: 700 }}
          navTop
          activeKey={this.state.activeKey}
        >
          <Tabbar.Item title="title1" tabKey="tab1" />
          <Tabbar.Item title="title2" tabKey="tab2" />
          <Tabbar.Item title="title3" tabKey="tab3" />
        </Tabbar>
      </View>
    );
  }
  renderContent = pageText => (
    <View style={[styles.tabContent]}>
      <Text style={styles.tabText}>{pageText}</Text>
    </View>
  );
  renderItemNoIcon = (iconName, isActive, key) => (
    <View style={styles.item}>
      <Text style={isActive ? styles.activeText : {}}>{iconName}</Text>
    </View>
  );
  renderItem = (iconName, isActive, key) => (
    <View style={styles.item}>
      <Text style={[styles.icon, isActive ? styles.activeText : {}]}>
        {iconsMap[iconName]}
      </Text>
      <Text style={isActive ? styles.activeText : {}}>{iconName}</Text>
    </View>
  );

  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection style={styles.container} title="normal">
            <Demo style={styles.container}>
              <DemoItem style={styles.container} direction="column">
                <View style={styles.container}>
                  <Tabbar navTop activeKey={this.state.activeKey}>
                    <Tabbar.Item
                      tabKey="tab1"
                      render={this.renderItemNoIcon.bind(this, 'home')}
                    />
                    <Tabbar.Item
                      tabKey="tab2"
                      render={this.renderItemNoIcon.bind(this, 'cart')}
                    />
                    <Tabbar.Item
                      tabKey="tab3"
                      render={this.renderItemNoIcon.bind(this, 'my')}
                    />
                  </Tabbar>
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection style={styles.container} title="bottom tab">
            <Demo style={styles.container}>
              <DemoItem style={styles.container} direction="column">
                <View style={styles.container}>
                  <Tabbar iconBar activeKey={this.state.activeKey}>
                    <Tabbar.Item
                      tabKey="tab1"
                      render={this.renderItem.bind(this, 'home')}
                    />
                    <Tabbar.Item
                      tabKey="tab2"
                      render={this.renderItem.bind(this, 'cart')}
                    />
                    <Tabbar.Item
                      tabKey="tab3"
                      render={this.renderItem.bind(this, 'my')}
                    />
                  </Tabbar>
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  tabContent: {
    flex: 1,
    backgroundColor: '#dddddd',
  },
  tabText: {
    fontSize: '40rem',
  },
  container: {
    height: 200,
  },
  item: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    fontFamily: 'tabicons',
    fontSize: '32rem',
  },
  activeText: {
    // color: '#337838',
  },
  // activeBorder: {
  //   borderTopWidth: '5rem',
  //   borderTopStyle: 'solid',
  //   borderTopColor: '#337838',
  // },
  // inactiveBorder: {
  //   borderTopWidth: '5rem',
  //   borderTopStyle: 'solid',
  //   borderTopColor: '#eeeeee',
  // },
};

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

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

initDemo('tabbar');