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 { CopyText } from '../component/text';
import {
  CopyButton,
  Button,
  BackButton,
  RadioButton,
} from '../component/button';
import { SettingContent, SettingList, SettingItem } from '../component/setting';
import { color, font } from '../component/style';
import { CopiedNotification, Alert } from '../component/notification';
import Text from '../component/text';
import LightningBoltIcon from '../../src/asset/icon/lightning-bolt';
import CopyDarkIcon from '../../src/asset/icon/copy-dark';
import BitcoinIcon from '../../src/asset/icon/bitcoin';
import BitsIcon from '../../src/asset/icon/bits';
import Icon from '../component/icon';

//import ChartApp from './chart';

//
// Pool Summary
//

const summaryStyles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    paddingBottom: 10,
    paddingLeft: 50,
    paddingRight: 50,
  },
  copyTxtX: {
    textAlign: 'center',
    marginTop: 35,
    marginBottom: 25,
    maxWidth: 450,
  },
  smlIcon: {
    height: 24,
    width: 24,
  },
  poolInfo: {
    fontSize: 10,
    lineHeight: 16,
    textAlign: 'center',
    width: '100%',
  },
  topIcon: {
    height: 92,
    width: 92,
    marginLeft: 'calc( 50% - 46 )',
    margin: 10,
    marginRight: 3,
    paddingTop: 50,
  },
  topPad: {
    paddingTop: 50,
  },
  listIcon: {
    height: 22,
    width: 22,
    justifyContent: 'left',
  },
  btnWrapper: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  box: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    marginRight: 20,
    backgroundColor: color.glasDarker,
    borderRadius: 5,
  },
  alert: {
    marginRight: 10,
  },
  txt: {
    fontSize: font.sizeXS,
    lineHeight: font.lineHeightXS,
  },
  copyBtn: {
    backgroundColor: color.glas,
    marginBottom: 10,
  },
  total: {
    marginLeft: 30,
  },
});

const ContractSummary = ({ unitLabel }) => (
  <View style={summaryStyles.wrapper}>
    <View style={summaryStyles.box}>
      <Alert type="success" style={summaryStyles.alert} />
      <Text style={summaryStyles.txt}>Gas fees</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>
        {unitLabel} (low)
      </Text>
    </View>
    <View style={summaryStyles.box}>
      <View style={summaryStyles.alert}>
        <BitcoinIcon />
      </View>
      <Text style={summaryStyles.txt}>ID</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>1942776</Text>
    </View>
  </View>
);

const ContractBalances = ({ balanceLabel, unitLabel }) => (
  <View style={summaryStyles.wrapper}>
    <View style={summaryStyles.box}>
      <View style={summaryStyles.alert}>
        <LightningBoltIcon height={170 * 0.06} width={135 * 0.06} />
      </View>
      <Text style={summaryStyles.txt}>{balanceLabel}</Text>
      <Text style={[summaryStyles.txt, summaryStyles.total]}>{unitLabel}</Text>
    </View>
  </View>
);

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

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

//
// Setting Contract View
//

const SetContractView = ({ store, nav, setting, invoice }) => {
  return (
    <Background color={color.blackDark}>
      <Header separator>
        <BackButton onPress={() => nav.goSettings()} />
        <Title title="Contract Settings" />
        <Button disabled onPress={() => {}} />
      </Header>
      <Button style={summaryStyles.topBtn}>
        <Title
          style={(summaryStyles.poolInfo, summaryStyles.topPad)}
          title="Algorand"
        />
        <Icon
          image={require('../asset/icon/algorand.png')}
          style={summaryStyles.topIcon}
        />
        <Title style={summaryStyles.poolInfo} title="https://algorand.com" />
        <CopyText style={summaryStyles.copyTxtX}>
          A world where everyone creates and exchanges value efficiently,
          transparently, and securely.
        </CopyText>
        <View style={summaryStyles.wrapper}>
          <View style={summaryStyles.box}>
            <View style={summaryStyles.alert}>
              <Alert type="success" style={summaryStyles.alert} />
            </View>
            <Text style={summaryStyles.txt}> Balance</Text>
            <Text style={[summaryStyles.txt, summaryStyles.total]}>
              {store.settings.chains.algo.account.balance}
            </Text>
          </View>
        </View>
        <ContractSummary
          style={summaryStyles.btnWrapper}
          poolBalanceOpenLabel=""
          poolBalanceClosingLabel=""
        />
        <Title
          style={[summaryStyles.poolInfo, summaryStyles.topPad]}
          title="Account information"
        />
        <ContractBalances
          style={summaryStyles.btnWrapper}
          balanceLabel="Public"
          unitLabel={store.settings.chains.algo.account.address}
        />
        <View style={summaryStyles.wrapper}>
          <View style={summaryStyles.box}>
            <View style={summaryStyles.alert}>
              <BitcoinIcon />
            </View>
            <Text style={summaryStyles.txt}> Balance</Text>
            <Text style={[summaryStyles.txt, summaryStyles.total]}>
              0.00001
            </Text>
          </View>
        </View>
        <View style={summaryStyles.wrapper}>
          <View style={summaryStyles.box}>
            <View style={summaryStyles.alert}>
              <BitsIcon />
            </View>
            <Text style={summaryStyles.txt}>Assets</Text>
            <Text style={[summaryStyles.txt, summaryStyles.total]}>0</Text>
          </View>
        </View>
        <CopyText style={summaryStyles.copyTxtX}>
          Do not share this information or funds will be compromised
        </CopyText>
        <CopyButton
          onPress={() =>
            invoice.toClipboard({
              text: store.settings.chains.algo.account.mnemonic,
            })
          }
          icon={<CopyDarkIcon height={17.5} width={14} />}
          style={summaryStyles.copyBtn}
        >
          private key
        </CopyButton>
      </Button>
      <SettingContent>
        <Title style={summaryStyles.poolInfo} title="How to connect" />
        <SettingList>
          <SettingItem
            name="Remote"
            label={
              store.settings.chains.algo.rpc[store.settings.chains.algo.chain]
                .server
            }
            onSelect={() =>
              setting.contractConnection({ chain: 'algo', connect: 'remote' })
            }
          >
            <RadioButton
              selected={'local' != store.settings.chains.algo.chain}
            />
          </SettingItem>
          <SettingItem
            name="Local"
            onSelect={() =>
              setting.contractConnection({ chain: 'algo', connect: 'local' })
            }
          >
            <RadioButton
              selected={'local' === store.settings.chains.algo.chain}
            />
          </SettingItem>
        </SettingList>
      </SettingContent>
      <CopiedNotification
        display={store.displayCopied}
        color={color.notifyLight}
      />
    </Background>
  );
};

SetContractView.propTypes = {
  invoice: PropTypes.object.isRequired,
  store: PropTypes.object.isRequired,
  setting: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
};

export default observer(SetContractView);
