import React from 'react';
import { StyleSheet, View, Platform } 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 { Header, Title } from '../component/header';
import { Alert } from '../component/notification';
import { color } from '../component/style';
import { H4Text } from '../component/text';
import Icon from '../component/icon';
import QrIcon from '../asset/icon/qr';
//import LightningBoltOrangeIcon from '../asset/icon/lightning-bolt-orange';
import {
  BalanceLabel,
  BalanceLabelNumeral,
  BalanceLabelNumeralsml,
} from '../component/label';
import { Button, GlasButton, DownButton } from '../component/button';

//
// Home View
//

const styles = StyleSheet.create({
  content: {
    paddingLeft: 20,
    paddingRight: 20,
    display: 'inline-block',
  },
  mainIcon: {
    height: 30,
    width: 30,
    marginLeft: 'calc( 50% - 75 )',
    margin: 10,
  },
  downBtnLeft: {
    margin: 25,
    width: '25%',
    display: 'inline-block',
    position: 'absolute',
    bottom: '0px',
    textAlign: 'center',
  },
  downBtnCenter: {
    margin: 25,
    width: '25%',
    display: 'inline-block',
    position: 'absolute',
    bottom: '0px',
    left: 'calc(50% - 12.5% - 25px)',
    textAlign: 'center',
  },
  downBtnRight: {
    margin: 25,
    width: '25%',
    display: 'inline-block',
    position: 'absolute',
    bottom: '0px',
    right: '0px',
    textAlign: 'center',
  },
});

const HomeView = ({
  store,
  wallet,
  channel,
  payment,
  invoice,
  pool,
  promotion,
  transaction,
  nav,
}) => {
  const {
    totalBalanceLabel,
    unitLabel,
    channelStatus,
    channelPercentageLabel,
    contractStatus,
    contractPercentageLabel,
  } = store;
  return (
    <Background image="purple-gradient-bg">
      <HomeHeader
        isTestnet={store.network === 'mainnet'}
        goDeposit={() => nav.goDeposit()}
        goGovern={() => nav.goGovern()}
        goSettings={() => nav.goSettings()}
      />
      <MainContent style={styles.content}>
        <BalanceDisplay
          totalBalanceLabel={totalBalanceLabel}
          unitLabel={unitLabel}
          channelStatus={channelStatus}
          channelPercentageLabel={channelPercentageLabel}
          contractStatus={contractStatus}
          contractPercentageLabel={contractPercentageLabel}
          toggleDisplayFiat={() => wallet.toggleDisplayFiat()}
          goChannels={() => channel.init()}
        />
        <SendReceiveButton
          goPay={() => payment.init()}
          goRequest={() => invoice.init()}
        />
        <DownButton onPress={() => pool.init()} style={styles.downBtnLeft}>
          Investments
        </DownButton>
        <DownButton
          onPress={() => transaction.init()}
          style={styles.downBtnCenter}
        >
          Transactions
        </DownButton>
        <DownButton
          onPress={() => promotion.init()}
          style={styles.downBtnRight}
        >
          Promotions
        </DownButton>
      </MainContent>
    </Background>
  );
};

HomeView.propTypes = {
  store: PropTypes.object.isRequired,
  wallet: PropTypes.object.isRequired,
  channel: PropTypes.object.isRequired,
  payment: PropTypes.object.isRequired,
  invoice: PropTypes.object.isRequired,
  transaction: PropTypes.object.isRequired,
  pool: PropTypes.object.isRequired,
  promotion: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
};

//
// Balance Display
//

const balanceStyles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    marginTop: 100,
  },
  percentBtn: {
    flexDirection: 'row',
  },
  alert: {
    marginRight: 6,
    marginLeft: '50%',
  },
});

const BalanceDisplay = ({
  totalBalanceLabel,
  unitLabel,
  channelStatus,
  channelPercentageLabel,
  contractStatus,
  contractPercentageLabel,
  toggleDisplayFiat,
  goChannels,
}) => (
  <View style={balanceStyles.wrapper}>
    {unitLabel ? (
      <Button onPress={toggleDisplayFiat}>
        <BalanceLabelNumeralsml>{unitLabel}</BalanceLabelNumeralsml>
      </Button>
    ) : (
      <Button onPress={toggleDisplayFiat}>
        <BalanceLabel>
          <BalanceLabelNumeralsml>
            {totalBalanceLabel.split(/(\s+)/)[0]}
          </BalanceLabelNumeralsml>
        </BalanceLabel>
      </Button>
    )}
    {unitLabel ? (
      <Button onPress={toggleDisplayFiat}>
        <BalanceLabel>
          <BalanceLabelNumeral>{totalBalanceLabel}</BalanceLabelNumeral>
        </BalanceLabel>
      </Button>
    ) : (
      <Button onPress={toggleDisplayFiat}>
        <BalanceLabel>
          <BalanceLabelNumeral>
            {totalBalanceLabel.split(/(\s+)/)[2]}
          </BalanceLabelNumeral>
        </BalanceLabel>
      </Button>
    )}
    <Button onPress={goChannels} style={balanceStyles.percentBtn}>
      <View
        style={{
          flex: 2,
          flexDirection: 'column',
          justifyContent: 'center',
          width: '100%',
          padding: '10',
          paddingTop: '50',
          textAlign: 'center',
        }}
      >
        <View
          style={{
            flex: 1,
            padding: 10,
            marginTop: '-10px',
          }}
        >
          <Alert type={channelStatus} style={balanceStyles.alert} />
          <H4Text style={{ paddingTop: '5px' }}>
            {channelPercentageLabel}
            {'\n'}
          </H4Text>
        </View>
        <View style={{ flex: 1, padding: 10, marginTop: '-10px' }}>
          <Alert type={contractStatus} style={balanceStyles.alert} />
          <H4Text style={{ paddingTop: '5px' }}>
            {contractPercentageLabel} on Contracts
          </H4Text>
        </View>
      </View>
    </Button>
  </View>
);

BalanceDisplay.propTypes = {
  totalBalanceLabel: PropTypes.string.isRequired,
  unitLabel: PropTypes.string,
  channelStatus: PropTypes.string.isRequired,
  channelPercentageLabel: PropTypes.string.isRequired,
  contractStatus: PropTypes.string.isRequired,
  contractPercentageLabel: PropTypes.string.isRequired,
  toggleDisplayFiat: PropTypes.func.isRequired,
  goChannels: PropTypes.func.isRequired,
};

//
// Send Receive Button
//

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

const SendReceiveButton = ({ goPay, goRequest }) => (
  <View style={bigBtnStyles.wrapper}>
    <GlasButton onPress={goRequest} style={bigBtnStyles.leftBtn}>
      Request
    </GlasButton>
    <View style={bigBtnStyles.boltWrapper}>
      <Icon
        image={require('../asset/icon/bitsIcon.png')}
        style={styles.mainIcon}
      />
    </View>
    <GlasButton onPress={goPay} style={bigBtnStyles.rightBtn}>
      Pay
    </GlasButton>
  </View>
);

SendReceiveButton.propTypes = {
  goPay: PropTypes.func.isRequired,
  goRequest: PropTypes.func.isRequired,
};

//
// Home Header
//

const headerStyles = StyleSheet.create({
  depositBtn: {
    marginLeft: 3,
  },
  testnet: {
    fontSize: 10,
    lineHeight: 16,
  },
  settingsBtn: {
    marginRight: 3,
  },
  settingsIcon: {
    height: 22,
    width: 22,
  },
});

const HomeHeader = ({ isTestnet, goDeposit, goSettings, goGovern }) => (
  <Header separator={Platform.OS === 'web'}>
    <Button onPress={goDeposit} style={headerStyles.depositBtn}>
      <QrIcon height={40 * 0.6} width={39 * 0.6} />
    </Button>
    <Button onPress={goGovern}>
      <View>
        {isTestnet ? (
          <Title style={headerStyles.testnet} title="BETA v0.7.8" />
        ) : null}
        <Title title="Bits" />
      </View>
    </Button>
    <Button onPress={goSettings} style={headerStyles.settingsBtn}>
      <Icon
        image={require('../asset/icon/settings.png')}
        style={headerStyles.settingsIcon}
      />
    </Button>
  </Header>
);

HomeHeader.propTypes = {
  isTestnet: PropTypes.bool.isRequired,
  goDeposit: PropTypes.func.isRequired,
  goSettings: PropTypes.func.isRequired,
  goGovern: PropTypes.func.isRequired,
};

export default observer(HomeView);
