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 MainContent from '../component/main-content';
//import { InputField } from '../component/field';
import { ListContent, List, ListItem } from '../component/list';
import { Header, Title } from '../component/header';
import { CancelButton, PillButton, Button } from '../component/button';
import Card from '../component/card';
import { Alert } from '../component/notification';
import Text from '../component/text';
//import LightningBoltIcon from '../asset/icon/lightning-bolt';
import { FormStretcher, FormText, FormSubText } from '../component/form';
import { color, font } from '../component/style';

import Icon from '../component/icon';
const styles = StyleSheet.create({
  description: {
    paddingLeft: 40,
    paddingRight: 40,
    paddingBottom: 40,
  },
  topIcon: {
    height: 100,
    width: 120,
    marginLeft: 'calc( 50% - 60 )',
    margin: 10,
    marginRight: 0,
  },
  subText: {
    paddingTop: 20,
    paddingBottom: 40,
    paddingLeft: 40,
    paddingRight: 40,
  },
});

const daoStyles = 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,
  },
});
//
// Dao 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 => {
  return require('../asset/icon/' + tx.cat + '.svg');
};
/*
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.type + '.png');
};
const DaoView = ({ store, nav, dao }) => {
  const { computedDao: daos, unitLabel } = store;
  console.log(daos, unitLabel);
  return (
    <Background image="purple-gradient-bg">
      <Header shadow color={color.white}>
        <Button disabled onPress={() => {}} />
        <Title title="Governance"></Title>
        <FormText style={styles.description}>
          Use your bits tokens to govern bitsoko
        </FormText>
        <CancelButton onPress={() => nav.goHome()} />
      </Header>
      <MainContent>
        <Card>
          <Icon
            image={require('../asset/icon/bitsokoDao.png')}
            style={styles.topIcon}
          />
          <ListContent>
            <List
              data={dao}
              renderItem={item => (
                <DaoListItem tx={item} onSelect={() => dao.select({ item })} />
              )}
            />
          </ListContent>
          <FormText style={styles.description}>
            Use your bits tokens to govern bitsoko
          </FormText>
          <FormStretcher>
            <FormSubText style={styles.subText}>
              Only Lightning Payment Requests or Bitcoin addresses will work at
              this time.
            </FormSubText>
          </FormStretcher>
          <PillButton onPress={() => dao.checkType()}>Next</PillButton>
        </Card>
      </MainContent>
    </Background>
  );
};
DaoView.propTypes = {
  store: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
  dao: PropTypes.object.isRequired,
};

const DaoListItem = ({ tx, onSelect }) => (
  <ListItem style={iStyles.item} onSelect={onSelect}>
    <Icon image={iconType(tx)} style={daoStyles.listIcon} />
    <View style={iStyles.i}></View>
    <Icon image={capType(tx)} style={daoStyles.listIcon} />
    <View style={[iStyles.m, iStyles.group]}>
      <Alert type={setState(tx)} style={iStyles.alert} />
      <Text style={iStyles.txt}>{tx.statusLabel}</Text>
    </View>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.Label}</Text>
    <View style={iStyles.l}>
      <Text style={[iStyles.txt, iStyles.wrap]} numberOfLines={1}>
        {tx.merchantLabel}
      </Text>
    </View>
    <Text style={[iStyles.m, iStyles.txt]}>{tx.amountLabel}</Text>
    <Text style={[iStyles.s, iStyles.txt]}>{tx.raised}</Text>
  </ListItem>
);

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

export default observer(DaoView);
