/**
 * Title: 获取矿晶
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useEffect, useState } from 'react';
import { connect, DispatchProp } from 'dva';
import { Spin, Input, Select, message } from 'antd';
import { formatMessage } from 'umi-plugin-locale';
import _ from 'lodash';
import { QRCanvas } from 'qrcanvas-react';
import Clipboard from 'react-clipboard.js';
import { MineModelState } from './model';
import { PageState } from '@/types/common';
import Header from '@/components/Header';

import styles from './style.less';

const Option = Select.Option;

const MinePage: React.FC<DispatchProp & MineModelState> = ({
  dispatch,
  pageState,
  coin,
  coins,
  srcValue,
  dstValue,
}) => {
  useEffect(() => {
    dispatch({ type: 'mine/load' });
  }, []);

  let body;
  if (pageState === PageState.Pending) {
    body = (
      <Spin className={styles.none} />
    );
  } else if (pageState === PageState.Failure) {
    body = (
      <div className={styles.none}>{formatMessage({ id: 'common.loadError' })}</div>
    );
  } else if (pageState === PageState.Success) {
    const onAddressCopied = () => {
      message.success(formatMessage({ id: 'common.copied' }));
    };
    body = (
      <>
        <div className={styles.section}>
          <div className="coin-selection">
            <span>{formatMessage({ id: 'mine.origin' })}</span>
            <Select
              size="small"
              value={coin && coin.id}
              onChange={(payload: any) => dispatch({ type: 'mine/selectCoin', payload })}
            >
              {coins.map(it => (
                <Option
                  key={it.id}
                  value={it.id}
                >{(_.take(it.label, 4).join('')).toUpperCase()}</Option>
              ))}
            </Select>
          </div>
          <div className="rate-trans">
            <span>{formatMessage({ id: 'mine.calc' })}</span>
            <Input
              size="small"
              value={srcValue}
              onChange={e => dispatch({ type: 'mine/changeSrc', payload: e.target.value })}
              type="number"
            /> {coin && coin.label.toUpperCase()} = {dstValue} {formatMessage({ id: 'mine.mine' })}
          </div>
        </div>

        <div
          className={`${styles.section} ${styles.main}`}
        >
          <div>{formatMessage({ id: 'mine.addressTitle' }, { label: coin && coin.label.toUpperCase() })}</div>
          <Clipboard
            component="div"
            data-clipboard-text={coin && coin.address}
            onSuccess={onAddressCopied}
          >
            <QRCanvas options={{
              data: coin ? coin.address : '',
              size: 240,
            }} />
          </Clipboard>
          <Clipboard
            component="div"
            className="address"
            data-clipboard-text={coin && coin.address}
            onSuccess={onAddressCopied}
          >
            {coin && coin.address}
          </Clipboard>
        </div>

        <div className={styles.section}>
          <span>{formatMessage({ id: 'mine.info' })}</span>
        </div>
      </>
    );
  }

  return (
    <div className={styles.container}>
      <Header
        className="header"
        title={formatMessage({ id: 'home.mine.retrieve' })}
      />

      <div className={styles.body}>
        <div className={styles.card}>{body}</div>
      </div>
    </div>
  );
};

export default connect(
  ({ mine }: any) => ({ ...mine }),
)(MinePage);