import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
import { observer } from 'mobx-react';
import { StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import Background from '../component/background';
import MainContent from '../component/main-content';
import { NamedField } from '../component/field';
import { Header, Title } from '../component/header';
import {
  BackButton,
  //CopyButton,
  Button,
  ButtonText,
} from '../component/button';
import {
  BalanceLabel,
  BalanceLabelNumeral,
  BalanceLabelUnit,
} from '../component/label';
import Card from '../component/card';
//import QRCode from '../component/qrcode';
import { CopiedNotification } from '../component/notification';
//import CopyPurpleIcon from '../asset/icon/copy-purple';
import LightningBoltIcon from '../asset/icon/lightning-bolt';
import { color } from '../component/style';

ChartJS.register(ArcElement, Tooltip, Legend);

const shareData = {
  labels: ['Locked', 'Allocated', 'Rewards', 'Others'],
  datasets: [
    {
      label: 'Pool Distribution',
      data: [6, 15, 3, 100],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(0, 0, 0, 0.1)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

const styles = StyleSheet.create({
  card: {
    paddingBottom: 0,
  },
  shareChart: {
    height: 320,
    width: 320,
    margin: 5,
  },
  balance: {
    marginTop: 25,
    marginBottom: 25,
  },
  numeral: {
    color: color.blackText,
  },
  unit: {
    color: color.blackText,
  },
  qrcode: {
    margin: 40,
  },
  copyBtn: {
    alignSelf: 'stretch',
  },
  doneBtn: {
    marginTop: 10,
  },
  doneRemText: {
    color: color.red,
  },
  doneBtnText: {
    color: color.purple,
  },
});

const PoolRemLiqConfView = ({ store, nav, poolremoveliq }) => (
  <Background image="purple-gradient-bg">
    <Header shadow color={color.purple}>
      <BackButton onPress={() => nav.goPoolRemLiqConf()} />
      <Title title="Remove Liquidity Confirmation">
        <LightningBoltIcon height={12} width={6.1} />
      </Title>
      <Button disabled onPress={() => {}} />
    </Header>
    <MainContent>
      <Card style={styles.card}>
        <View style={styles.shareChart}>
          <Pie data={shareData} />
        </View>
        <BalanceLabel style={styles.balance}>
          <BalanceLabelNumeral style={styles.numeral}>
            {store.invoiceAmountLabel}
          </BalanceLabelNumeral>
          <BalanceLabelUnit style={styles.unit}>
            {store.unitLabel}
          </BalanceLabelUnit>
        </BalanceLabel>
        <NamedField name="Note">{store.invoice.note}</NamedField>
        <Button
          onPress={() => poolremoveliq.confirmRem()}
          style={styles.doneBtn}
        >
          <ButtonText style={styles.doneRemText}>REMOVE</ButtonText>
        </Button>
        <Button onPress={() => nav.goPoolRemoveLiquid()} style={styles.doneBtn}>
          <ButtonText style={styles.doneBtnText}>back</ButtonText>
        </Button>
      </Card>
      <CopiedNotification
        display={store.displayCopied}
        color={color.notifyDark}
      />
    </MainContent>
  </Background>
);

PoolRemLiqConfView.propTypes = {
  store: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
  poolremoveliq: PropTypes.object.isRequired,
};

export default observer(PoolRemLiqConfView);
