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 PlusIcon from '../../src/asset/icon/plus';

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

//
// Pool Summary
//

const summaryStyles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    paddingBottom: 10,
    paddingLeft: 50,
    paddingRight: 50,
  },
  box: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    marginRight: 20,
    backgroundColor: color.glasDarker,
    borderRadius: 5,
  },
  alert: {
    marginRight: 10,
  },
  txt: {
    fontSize: font.sizeXS,
    lineHeight: font.lineHeightXS,
  },
  total: {
    marginLeft: 30,
  },
});
/*
const PoolSummary = ({
  poolBalanceOpenLabel,
  poolBalanceClosingLabel,
  unitLabel,
}) => (
  <View style={summaryStyles.wrapper}>
    <View style={summaryStyles.box}>
      <Alert type="success" style={summaryStyles.alert} />
      <Text style={summaryStyles.txt}>Rewards</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
     //   {poolBalanceOpenLabel} {unitLabel}
     0.00 {unitLabel}
      </Text>
    </View>
    <View style={summaryStyles.box}>
      <Alert type="error" style={summaryStyles.alert} />
      <Text style={summaryStyles.txt}>Locked</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
       // {poolBalanceClosingLabel} {unitLabel}
        0.00 {unitLabel}
      </Text>
    </View>
  </View>
);
*/
const PoolSummary = ({ unitLabel }) => (
  <View style={summaryStyles.wrapper}>
    <View style={summaryStyles.box}>
      <Alert type="success" style={summaryStyles.alert} />
      <Text style={summaryStyles.txt}>Rewards</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
        {unitLabel} 0.00
      </Text>
    </View>
    <View style={summaryStyles.box}>
      <Alert type="error" style={summaryStyles.alert} />
      <Text style={summaryStyles.txt}>Locked</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
        0.00 {unitLabel}
      </Text>
    </View>
  </View>
);

const PoolBalances = ({ poolBalanceLabel }) => (
  <View style={summaryStyles.wrapper}>
    <View style={summaryStyles.box}>
      <View style={summaryStyles.alert}>
        <BitcoinIcon height={170 * 0.06} width={135 * 0.06} />
      </View>
      <Text style={summaryStyles.txt}>Balance</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
        {poolBalanceLabel}
      </Text>
    </View>
  </View>
);

PoolSummary.propTypes = {
  poolBalanceOpenLabel: PropTypes.string.isRequired,
  poolBalanceClosingLabel: PropTypes.string.isRequired,
  unitLabel: PropTypes.string,
};

PoolBalances.propTypes = {
  poolBalanceLabel: PropTypes.string.isRequired,
  balanceLabel: PropTypes.string.isRequired,
  unitLabel: PropTypes.string,
};

//
// Pools View
//

const poolStyles = StyleSheet.create({
  btnWrapper: {
    //width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
    //margin: 10,
  },
  depositBtn: {
    marginLeft: 3,
  },
  poolInfo: {
    fontSize: 10,
    lineHeight: 16,
    textAlign: 'center',
    width: '80%',
  },
  tinyIcon: {
    height: 12,
    width: 12,
  },
  topBtn: {
    marginTop: 20,
    marginBottom: 10,
    marginRight: 3,
  },
  topIcon: {
    height: 92,
    width: 92,
    marginLeft: 'calc( 50% - 46 )',
    margin: 10,
    marginRight: 3,
  },
  listIcon: {
    height: 22,
    width: 22,
    justifyContent: 'left',
  },
  topBtnWrapper: {
    margin: 10,
  },
});
const PoolView = ({ store, nav, pool }) => {
  const {
    computedPools: pools,
    poolBalanceLabel,
    poolBalanceOpenLabel,
    poolBalanceClosingLabel,
    balanceLabel,
    unitLabel,
  } = store;
  return (
    <Background color={color.blackDark}>
      <Header separator>
        <ChannelButton onPress={() => nav.goInvestments()} />
        <Title title="Investment Pools" />
        <CancelButton onPress={() => nav.goHome()} />
      </Header>
      <Button style={poolStyles.topBtn}>
        <Icon
          image={require('../asset/icon/bits-invest.png')}
          style={poolStyles.topIcon}
        />
        <PoolBalances
          style={poolStyles.btnWrapper}
          poolBalanceLabel={poolBalanceLabel}
          balanceLabel={balanceLabel}
          unitLabel={unitLabel}
        />
        <PoolSummary
          style={poolStyles.btnWrapper}
          poolBalanceOpenLabel={poolBalanceOpenLabel}
          poolBalanceClosingLabel={poolBalanceClosingLabel}
        />
      </Button>
      <View style={poolStyles.btnWrapper}></View>
      <Title
        style={poolStyles.poolInfo}
        title="Select merchants to manage liquidity pool funds"
      />
      <ListContent>
        <List
          data={pools}
          renderHeader={PoolListHeader}
          renderItem={item => (
            <PoolListItem tx={item} onSelect={() => pool.select({ item })} />
          )}
        />
      </ListContent>
    </Background>
  );
};

PoolView.propTypes = {
  store: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
  pool: PropTypes.object.isRequired,
  grpc: PropTypes.object.isRequired,
  goPoolAdd: 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 setState = tx => {
  return tx.status === 'open' ? 'success' : 'error';
};

const capType = tx => {
  //tx.cat
  console.log(tx);
  var cap = ['micro', 'small', 'medium']
    .sort(() => Math.random() - Math.random())
    .slice(0, 1)[0];
  return require('../asset/icon/' + cap + '.png');
  //return require('../asset/icon/soko.png');
};
/*
const statusType = tx => {
  if (tx.type === 'active') {
    return tx.status === 'complete' ? 'success' : 'info';
  } else {
    return tx.status === 'confirmed' ? '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.cat+'.png');
};
*/
const PoolListItem = ({ tx, onSelect }) => (
  <ListItem style={iStyles.item} onSelect={onSelect}>
    <Icon image={capType(tx)} style={poolStyles.listIcon} />
    <View style={iStyles.i}></View>
    <View style={[iStyles.m, iStyles.group]}>
      <Alert type={setState(tx)} style={iStyles.alert} />
      <Text style={iStyles.txt}>{tx.statusLabel}</Text>
    </View>
    <View style={iStyles.l}>
      <Text style={[iStyles.txt, iStyles.wrap]} numberOfLines={1}>
        {tx.merchantLabel}
      </Text>
    </View>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.amount}</Text>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.quoteLabel}</Text>
    <Text style={[iStyles.s, iStyles.txt]}>{tx.raised}</Text>
  </ListItem>
);

PoolListItem.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 PoolListHeader = () => (
  <ListHeader style={[iStyles.item, hStyles.header]}>
    <View style={iStyles.i} />
    <Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
    <Text style={[iStyles.m, hStyles.txt]}></Text>
    <Text style={[iStyles.l, hStyles.txt]}>MERCHANT</Text>
    <Text style={[iStyles.l, hStyles.txt]}>SHARE</Text>
    <Text style={[iStyles.m, hStyles.txt]}>PRICE</Text>
    <Text style={[iStyles.s, hStyles.txt]}>% CHANGE</Text>
  </ListHeader>
);

export default observer(PoolView);
