import React, { Component } from 'react';
import {
  Button,
  Table,
  moment,
  Pagination,
  Input,
  Select,
  Balloon,
  Form,
} from '@icedesign/base';
import IceEvents from '@ali/ice-events';
import { normalizeGitUrl, getUserInfo, getUrlParam } from '../utils';
import './CollectList.less';
import { Link } from 'react-router';
import EditDialogForm from './EditDialogForm';

const Option = Select.Option;

@IceEvents
export default class CollectView extends Component {
  renderTableRepo = (repo, index, record) => {
    const type = getUrlParam('type');
    const query = type ? { type } : {};
    const { id, project } = record || {};

    if (repo === 'undefined/undefined' || !repo) {
      return (
        <Link to={{ pathname: `/collection/${id}`, query }}>
          {project || '暂无'}
        </Link>
      );
    }
    let git = normalizeGitUrl(repo);
    return (
      <Link to={{ pathname: `/collection/${id}`, query }}>{git.repo}</Link>
    );
  };

  renderTableBaseComponentVersion = (version, index) => {
    const { list = [] } = this.props;
    let baseComponent = list[index].baseComponent || '';

    if (version === 'not installed') {
      version = '';
    }

    if (baseComponent === '@ali/ice') {
      baseComponent = (
        <Balloon trigger={<span style={styles.link}>ICE 基础包</span>}>
          ICE 基础包指的是 @ali/ice 或者 @icedesign/base
        </Balloon>
      );
    } else if (baseComponent === '@alife/next') {
      baseComponent = (
        <Balloon trigger={<span style={styles.link}>Fusion 基础包</span>}>
          Fusion 基础包指的是 @alife/next
        </Balloon>
      );
    }

    return (
      <span>
        <div>{baseComponent}</div>
        <div>{version}</div>
      </span>
    );
  };

  renderTableDevelopers = (developers, index, record) => {
    developers = developers || [];

    if (developers.indexOf(record.author) === -1) {
      developers.push(record.author);
    }

    return (
      <span>
        {developers.map((developer, idx) => (
          <a
            href={`https://work.alibaba-inc.com/nwpipe/search?keywords=${developer}&type=person`}
            target="_blank"
            style={{ marginRight: '3px' }}
            key={idx}
          >
            {developer}
          </a>
        ))}
      </span>
    );
  };

  renderTableDescription = (description) => {
    return <span>{description || '暂无'}</span>;
  };

  renderTableDatetime = (raw) => (
    <span>
      {moment(raw)
        .locale('zh-cn')
        .format('YYYY-MM-DD HH:mm:ss')}
    </span>
  );

  renderTableOperation = (value, index, record) => {
    const { id, description, projectUrl, status } = record;
    return (
      <Button
        onClick={() => {
          this.emit('collect:edit', { id, description, projectUrl, status });
        }}
        size="small"
        shape="text"
      >
        编辑
      </Button>
    );
  };

  renderProjectStatus = (value) => {
    const obj = {
      confirmed: '已确认',
      notConfirmed: '未确认',
      test: '测试',
    };
    return obj[value] || '测试';
  };

  /**
   * 顶部的筛选条件
   */
  renderFilter = (isAdmin) => {
    return (
      <div className="page-filter-wrapper">
        <div className="filter-wrapper">
          <Form direction="hoz">
            {isAdmin && this.props.baseComponent === 'ice' ? (
              <Form.Item label="项目状态：">
                <Select
                  value={this.props.queryStatus}
                  onChange={(value) => {
                    this.emit('collect:queryChange', 'status', value);
                  }}
                  style={{
                    width: '120px',
                    height: '32px',
                    lineHeight: '30px',
                  }}
                >
                  <Option value="all">全部</Option>
                  <Option value="test">测试项目</Option>
                  <Option value="notConfirmed">待确认项目</Option>
                  <Option value="confirmed">确认项目</Option>
                </Select>
              </Form.Item>
            ) : null}
            <Form.Item label="搜索：">
              <Input
                style={{ width: 200 }}
                placeholder="组件/花名/项目名"
                value={this.props.queryKeywords}
                onChange={(value) => {
                  this.emit('collect:queryChange', 'keywords', value);
                }}
              />
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  };

  render() {
    const {
      isLoading,
      error,
      list,
      pageIndex,
      pageSize,
      totalCount,
      editFormData,
    } = this.props;
    const { isAdmin } = getUserInfo();
    let content = null;

    if (error) {
      content = <div>{JSON.stringify(error)}</div>;
    } else {
      content = (
        <div className="table-wrapper">
          {this.renderFilter(isAdmin)}
          <Table isLoading={isLoading} dataSource={list}>
            <Table.Column
              title="项目详情"
              dataIndex="repo"
              cell={this.renderTableRepo}
            />
            <Table.Column
              title="项目简介"
              dataIndex="description"
              cell={this.renderTableDescription}
            />
            <Table.Column
              title="项目成员"
              dataIndex="developers"
              cell={this.renderTableDevelopers}
            />
            <Table.Column
              title="基础包"
              width={120}
              dataIndex="baseComponentVersion"
              cell={this.renderTableBaseComponentVersion}
            />
            <Table.Column
              title="最后更新"
              dataIndex="updatedAt"
              cell={this.renderTableDatetime}
            />
            {isAdmin && (
              <Table.Column
                title="项目状态"
                width={89}
                dataIndex="status"
                cell={this.renderProjectStatus}
              />
            )}
            {isAdmin && (
              <Table.Column
                title="操作"
                width={89}
                cell={this.renderTableOperation}
              />
            )}
          </Table>
          <Pagination
            current={pageIndex}
            pageSize={pageSize}
            total={totalCount}
            onChange={(value) => {
              this.emit('collect:queryChange', 'pageIndex', value);
            }}
          />
          {isAdmin && <EditDialogForm formData={editFormData} />}
        </div>
      );
    }

    return <div className="collect-list-page">{content}</div>;
  }
}

const styles = {
  link: {
    cursor: 'pointer',
  },
};