import React from 'react';
import { StyleSheet, View } from 'react-native';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import Background from '../component/background';
import MainContent from '../component/main-content';
import { DetailField } from '../component/field';
import Modal from '../component/modal';
import { color } from '../component/style';
//import LightningBoltOrangeIcon from '../asset/icon/lightning-bolt-orange';
import { GlasButton } from '../component/button';

import Icon from '../component/icon';
const styles = StyleSheet.create({
  content: {
    justifyContent: 'center',
  },
  topIcon: {
    height: 52,
    width: 52,
  },
});

const PromotionDetailView = ({ store, nav }) => (
  <Background color={color.blackDark}>
    <MainContent style={styles.content}>
      <Modal
        title={store.selectedPromotion.title}
        onClose={() => nav.goPromotions()}
      >
        <Icon
          image={require('../asset/icon/channel.svg')}
          style={styles.topIcon}
        />
        <DetailField name="detail">
          Join this promotion or redeem loyalty rewards to your bitcoin wallet
        </DetailField>
        <DetailField name={store.selectedPromotion.idName}>
          {store.selectedPromotion.id}
        </DetailField>
        <DetailField name="Type">
          {store.selectedPromotion.typeLabel}
        </DetailField>
        <DetailField name="Date">
          {store.selectedPromotion.dateTimeLabel}
        </DetailField>
        {store.selectedPromotion.memo ? (
          <DetailField name="Note">{store.selectedPromotion.memo}</DetailField>
        ) : null}
        <DetailField name="Amount">
          {store.selectedPromotion.amountLabel} {store.unitLabel}
        </DetailField>
        <DetailField name="Rewards">
          {store.selectedPromotion.feeLabel} {store.unitLabel}
        </DetailField>
        {store.selectedPromotion.confirmationsLabel ? (
          <DetailField name="Confirmations">
            {store.selectedPromotion.confirmationsLabel}
          </DetailField>
        ) : null}
        <DetailField name="Status">
          {store.selectedPromotion.statusLabel}
        </DetailField>
        {store.selectedPromotion.preimage ? (
          <DetailField name="Proof of Payment">
            {store.selectedPromotion.preimage}
          </DetailField>
        ) : null}
        <SendReceiveButton nav={nav} />
      </Modal>
    </MainContent>
  </Background>
);

PromotionDetailView.propTypes = {
  store: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
  poolredeemliq: PropTypes.object.isRequired,
};

//
// Send Receive Button
//

const bigBtnStyles = StyleSheet.create({
  wrapper: {
    alignSelf: 'stretch',
    flexDirection: 'row',
    marginTop: 80,
    backgroundColor: '#0f5f76',
    borderRadius: 21,
  },
  leftBtn: {
    flex: 1,
    borderTopLeftRadius: 21,
    borderBottomLeftRadius: 21,
    backgroundColor: 'red',
  },
  rightBtn: {
    flex: 1,
    borderTopRightRadius: 21,
    borderBottomRightRadius: 21,
    backgroundColor: 'green',
  },
  boltWrapper: {
    justifyContent: 'center',
    backgroundColor: color.glas,
  },
});

const SendReceiveButton = ({ nav }) => (
  <View style={bigBtnStyles.wrapper}>
    <GlasButton onPress={nav} style={bigBtnStyles.leftBtn}>
      Transfer
    </GlasButton>
    <View style={bigBtnStyles.boltWrapper}></View>
    <GlasButton
      onPress={nav.goURL(
        'https://dooca.bitsoko.org/bits/index-28.html#promoid=13'
      )}
      style={bigBtnStyles.rightBtn}
    >
      Redeem
    </GlasButton>
  </View>
);

SendReceiveButton.propTypes = {
  nav: PropTypes.object.isRequired,
};

export default observer(PromotionDetailView);
