import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { asyncSMessage } from '@src/services/AsyncTools';
import { H5Url } from '../../../../Constant';
import Button from '../../../components/Button';
import Input from '../../../components/Input';
import Tag from '../../../components/Tag';
import { My } from '../../../stores/my';
import { Common } from '../../../stores/common';

export default class extends Page {
  initState() {
    return {
      emails: [],
      select: -1,
    };
  }

  init() {
    Common.readyWechat(window.location.href, ['onMenuShareAppMessage'])
      .then((wx) => {
        const { info } = this.props.user;
        wx.onMenuShareAppMessage({
          title: '千行GMAT 好友邀请连接', // Share title
          desc: '点击邀请连接', // Share description
          link: `${H5Url}/id/${info.inviteCode}`, // Share Link,this link domain name and path must be the same as the current page which corresponding to JS secured domain name as Official account
          imgUrl: '', // Share Icon
          type: 'link', // Share type, music, video link, not filled default link
          dataUrl: '', // If type is music or video, provide data links, the default is empty
          success() {
            // The user confirms the callback function that was executed after sharing
          },
          cancel() {
            // The user cancels the callback function that was executed after sharing
          },
        });
      });
  }

  addEmail(value) {
    const { emails } = this.state;
    emails.push(value.replace(';', '').replace('；', ''));
    this.setState({
      email: '',
      emails,
    });
  }

  removeEmail(index) {
    const { emails } = this.state;
    emails.splice(index, 1);
    this.setState({
      emails,
    });
  }

  submit() {
    const { emails } = this.state;
    if (emails.length === 0) return;
    My.inviteEmail(emails).then(() => {
      asyncSMessage('发送成功');
      this.setState({ email: '', emails: [] });
    }).catch(() => {
      asyncSMessage('发送失败', 'warn');
    });
  }

  renderView() {
    return (
      <div>
        <div className="text">
          每邀请一位好友注册“千行GMAT”，
          <br />
          你的VIP权限会延长7天，可累加无上限。
        </div>
        <div className="line" />
        <div className="title">微信邀请</div>
        <div className="t-c">
          <div className="item t-c">
            <Assets name="img1" />
            <div>1.点击右上角「 ···」</div>
          </div>
          <div className="item t-c">
            <Assets name="img2" />
            <div>2.发送给朋友</div>
          </div>
        </div>
        {/* <Button className="go" block width={110} radius>
          去邀请
        </Button> */}
        <div className="title">邮件邀请</div>
        <Input placeholder="添加多个邮箱，请用「；」间隔" value={this.state.email || ''} onChange={(e) => {
          const { value } = e.target;
          if (value.length > 0) {
            const last = value[value.length - 1];
            if (last === ';' || last === '；') {
              // 添加邮箱
              this.addEmail(value);
            } else {
              this.setState({ email: value });
            }
          } else {
            this.setState({ email: value });
          }
        }} />
        <div className="tag-list">
          {this.state.emails.map((email, index) => <Tag theme={this.state.select !== index ? 'white' : 'disabled'} radius onClick={() => {
            if (this.state.select === index) this.setState({ select: -1 });
            else this.setState({ select: index });
          }} onClose={this.state.select === index ? () => this.removeEmail(index) : null}>
            {email}
          </Tag>)}
        </div>
        <Button block width={110} radius onClick={() => {
          this.submit();
        }}>
          发送邀请
        </Button>
      </div>
    );
  }
}