/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import ListView from 'nuke-list-view';
import Icon from 'nuke-icon';
import Badge from 'nuke-badge';
import { StyleProvider } from 'nuke-theme-provider';
import { decodeVar, DemoContainer, DemoSection, Demo, DemoItem, initDemo } from '@alife/nuke-demo-helper';

const listData = [{ id: 1, text: 'item1' }, { id: 2, text: 'item2' }, { id: 3, text: 'item3' }];
const App = class NukeDemoIndex extends Component {
  renderItem = (item, index) => (
    <Touchable id={`cell_${item.id}`} style={[styles.item, index === 0 ? styles.topItem : null]} onPress={() => {}}>
      <Badge
        style={{
          position: 'absolute',
          top: 34,
          left: 0,
        }}
      >
        <Icon type="comments" />
      </Badge>
      <Text style={styles.text}>{item.text}</Text>
      <Icon style={styles.icon} name="enter" />
    </Touchable>
  );
  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="Unread dot">
            <Demo>
              <DemoItem direction="column">
                <View style={{ padding: 20, position: 'relative' }}>
                  <Icon name="message" style={{ fontSize: 50 }} />
                  <Badge
                    style={{
                      position: 'absolute',
                      top: 20,
                      left: 60,
                    }}
                  >
                    <Icon type="comments" />
                  </Badge>
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Unread number">
            <Demo>
              <DemoItem direction="column">
                <View style={{ padding: 20, position: 'relative' }}>
                  <View
                    style={{
                      width: 84,
                      height: 84,
                      borderRadius: 42,
                      backgroundColor: '#eeeeee',
                    }}
                  />
                  <Badge
                    style={{
                      position: 'absolute',
                      top: 20,
                      left: 84,
                    }}
                    count={722}
                    max={222}
                  />
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="Unread list">
            <Demo>
              <DemoItem direction="column">
                <View style={{ padding: 30, position: 'relative' }}>
                  <Text style={{ fontSize: 30 }}>您有新消息</Text>
                  <Badge
                    style={{
                      position: 'absolute',
                      top: 20,
                      left: 200,
                    }}
                    count={722}
                    max={222}
                  />
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="讨嫌的小红点">
            <Demo>
              <DemoItem direction="column">
                <ListView x="listxxx" renderRow={this.renderItem} dataSource={listData} style={styles.list} />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  wrapper: {
    padding: 20,
  },

  btn: {
    marginRight: 20,
  },
  btnblock: {
    marginBottom: 20,
  },
  badgeBlock: {
    backgroundColor: '#eeeeee',
    width: '48rem',
    height: '48rem',
    borderRadius: '4rem',
  },
  list: {
    height: 88 * 3,
    borderTopWidth: 2,
    borderTopStyle: 'solid',
    borderTopColor: '#eeeeee',
    borderBottomWidth: 2,
    borderBottomStyle: 'solid',
    borderBottomColor: '#eeeeee',
    paddingLeft: 20,
    paddingRight: 20,
  },
  item: {
    height: 88,
    paddingLeft: 30,
    borderTopWidth: 2,
    borderTopStyle: 'solid',
    borderTopColor: '#eeeeee',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  topItem: { borderTopWidth: 0 },
  text: {
    color: '#000000',
    fontSize: 34,
    flex: 1,
  },
  icon: {
    width: 40,
    color: '#C7C7CC',
    fontSize: 40,
  },
};

window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};
renderDemo('en-us', window.THEME_VARIABLE);
initDemo('badge');