import React, { Component } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import './index.less';
import Assets from '@src/components/Assets';
import { asyncSMessage } from '@src/services/AsyncTools';
import { Icon } from 'antd';
import Button from '../Button';
import { Input } from '../Login';
import { Main } from '../../stores/main';
import { My } from '../../stores/my';
import { PcUrl, H5Url } from '../../../Constant';

export default class Invite extends Component {
  constructor(props) {
    super(props);
    this.state = { data: this.props.data || {}, qr: Main.qrCode(`${H5Url}/id/${(this.props.data || {}).inviteCode}`) };
  }

  changeData(field, value) {
    let { data } = this.state;
    data = data || {};
    data[field] = value;
    this.setState({ data, error: null });
  }

  send() {
    const { data } = this.state;
    if (!data.emails) return;
    My.inviteEmail(data.emails.replace(/；/g, ';').split(';'))
      .then(() => {
        data.emails = '';
        this.setState({ success: true, data });
      });
  }

  render() {
    const { data } = this.props;
    const { success, qr } = this.state;
    return (
      <div className="invite-block">
        <div className="title-block">
          <b>方法一:</b> 将邀请链接发送给好友
      </div>
        <div className="input-layout">
          <div className="input-block">
            <div className="t1">http://</div>
            <div className="t2">{PcUrl.replace('http://', '')}/id/{data.inviteCode}</div>
          </div>
          <CopyToClipboard
            text={`${PcUrl}/id/${data.inviteCode}`}
            onCopy={() => asyncSMessage('已复制')}>
            <Button radius>复制</Button>
          </CopyToClipboard>
        </div>
        <div className="title-block">
          <b>方法二:</b> 微信扫码分享
      </div>
        <div className="qrcode">
          <Assets src={qr} />
        </div>
        <div className="title-block">
          <b>方法三:</b> 向好友发送邀请邮件
      </div>
        <div className="input-layout">
          <div className="input-block">
            <Input
              placeholder="输入多个邮箱，用';'隔开"
              value={this.state.data.emails || ''}
              error={this.state.error}
              onChange={e => {
                this.changeData('emails', e.target.value);
              }}
            />
            {success && <div className="success">
              <Icon type="check" />邀请已发送
          </div>}
          </div>
          <Button radius onClick={() => {
            this.send();
          }}>发送</Button>
        </div>
      </div>
    );
  }
}