import React from 'react';
import { View, StyleSheet } from 'react-native';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import Background from '../component/background';
import { Header, Title } from '../component/header';
import { CancelButton, ChannelButton } from '../component/button';
import { ListContent, List, ListItem, ListHeader } from '../component/list';
import { Alert } from '../component/notification';
import Text from '../component/text';
//import BitcoinIcon from '../../src/asset/icon/bitcoin';
//import LightningBoltIcon from '../../src/asset/icon/lightning-bolt';
import { color, font } from '../component/style';
import { Button } from '../component/button';

import Icon from '../component/icon';
//import ChartApp from './chart';

//
// Promos View
//
const promotionStyles = StyleSheet.create({
  depositBtn: {
    marginLeft: 3,
  },
  poolInfo: {
    fontSize: 10,
    lineHeight: 16,
    textAlign: 'center',
    width: '80%',
  },
  topBtn: {
    marginTop: 20,
    marginBottom: 10,
    marginRight: 3,
  },
  listIcon: {
    height: 22,
    width: 22,
    justifyContent: 'left',
  },
  topIcon: {
    height: 92,
    width: 92,
  },
});
const PromotionView = ({ store, nav, promotion }) => {
  const { computedPromotions: promotions } = store;
  return (
    <Background color={color.blackDark}>
      <Header separator>
        <ChannelButton onPress={() => nav.goURL('https://dooca.net')} />
        <Title title="Redeem Promotions" />
        <CancelButton onPress={() => nav.goHome()} />
      </Header>
      <Button style={promotionStyles.topBtn} onPress={() => nav.goHome()}>
        <Icon
          image={require('../asset/icon/promo.png')}
          style={promotionStyles.topIcon}
        />
      </Button>
      <Title
        style={promotionStyles.poolInfo}
        title="Earn cash-back rewards by joining local promotions"
      />
      <Title
        style={promotionStyles.poolInfo}
        title="Rewards can only be redeemed after promotion ends"
      />
      <ListContent>
        <List
          data={promotions}
          renderHeader={PromotionListHeader}
          renderItem={item => (
            <PromotionListItem
              tx={item}
              onSelect={() => promotion.select({ item })}
            />
          )}
        />
      </ListContent>
    </Background>
  );
};

PromotionView.propTypes = {
  store: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
  promotion: PropTypes.object.isRequired,
};

//
// Pool List Item
//

const iStyles = StyleSheet.create({
  item: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  wrap: {
    paddingRight: 50,
  },
  txt: {
    color: color.white,
    fontSize: font.sizeS,
  },
  alert: {
    marginRight: 6,
  },
  group: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  l: { flex: 8 },
  m: { flex: 4 },
  s: { flex: 2 },
  i: { flex: 1 },
});

const statusType = tx => {
  if (tx.type.toLowerCase() === 'bits') {
    return tx.status === 'ready' ? 'success' : 'info';
  } else {
    return tx.status === 'ready' ? 'success' : 'info';
  }
};

const iconType = tx => {
  /*
  if (tx.type === 'algorand') {
     tx.status === 'complete' ? 'success' : 'info';
  } else {
    tx.status === 'confirmed' ? 'success' : 'info';
  }
  */
  return require('../asset/icon/' + tx.type.toLowerCase() + '.png');
};

const PromotionListItem = ({ tx, onSelect }) => (
  <ListItem style={iStyles.item} onSelect={onSelect}>
    <View style={iStyles.i}>
      <Icon image={iconType(tx)} style={promotionStyles.listIcon} />
    </View>
    <View style={[iStyles.m, iStyles.group]}>
      <Alert type={statusType(tx)} style={iStyles.alert} />
      <Text style={iStyles.txt}>{tx.statusLabel}</Text>
    </View>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.dateLabel}</Text>
    <View style={iStyles.l}>
      <Text style={[iStyles.txt, iStyles.wrap]} numberOfLines={2}>
        {tx.title}
      </Text>
    </View>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.amountLabel}</Text>
    <Text style={[iStyles.s, iStyles.txt]}>{tx.feeLabel}</Text>
  </ListItem>
);

PromotionListItem.propTypes = {
  tx: PropTypes.object.isRequired,
  onSelect: PropTypes.func.isRequired,
};

//
// Transaction List Header
//

const hStyles = StyleSheet.create({
  txt: {
    color: color.greyListHeader,
    fontSize: font.sizeXS,
  },
  header: {
    backgroundColor: color.blackDark,
  },
});

const PromotionListHeader = () => (
  <ListHeader style={[iStyles.item, hStyles.header]}>
    <View style={iStyles.i} />
    <Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
    <Text style={[iStyles.m, hStyles.txt]}>ENDING</Text>
    <Text style={[iStyles.l, hStyles.txt]}>PROMO</Text>
    <Text style={[iStyles.m, hStyles.txt]}>REWARD</Text>
    <Text style={[iStyles.s, hStyles.txt]}>LEFT</Text>
  </ListHeader>
);

export default observer(PromotionView);
