/**
 * Created at 2018/3/14.
 * @Author Ling.
 * @Email i@zeroling.com
 */
import React, {Component, PropTypes} from 'react';
import { Dialog, Table, Button, Pagination, moment, Tab, Radio, Feedback } from '@icedesign/base';
import { Link } from 'react-router';
import axios from 'axios';
import Events from '@ali/ice-events';
import SearchInput from './SearchInput';
import { getUserInfo, isAlibaba } from '../../utils';
import './PlaygroundList.scss';

const { Group: RadioGroup } = Radio;

@Events
export default class extends Component {
  static propTypes = {};

  static defaultProps = {};

  state = {
    // index 从 1 开始
    pageIndex: 1,
    totalCount: 0,
    keyword: '',
    activeType: 'all',
    tag: '',

    isLoading: true,
    list: [],
  };

  pageSize = 20;

  componentDidMount() {
    if (isAlibaba) {
      this.fetchData()
        .then(({ list, totalCount }) => {
          // 填充数据
          this.setState({
            totalCount,
            list,
            isLoading: false,
          });
        });

      this.on('playground:queryChange', (newQuery) => {
        this.setState({
          isLoading: true,
          tag: newQuery.tag,
        }, () => {
          this.fetchData({
            ...newQuery,
            keyword: newQuery.keyword || '',
            pageIndex: 1,
          })
            .then(({ list, totalCount }) => {
              // 填充数据
              this.setState({
                pageIndex: 1,
                totalCount,
                list,
                isLoading: false,
              });
            });
        });
      });
    }
  }

  changeActiveType = (value) => {
    this.setState({ activeType: value, isLoading: true }, () => {
      this.fetchData({ isMine: value === 'mine', pageIndex: 1 })
        .then(({ list, totalCount }) => {
          // 填充数据
          this.setState({
            pageIndex: 1,
            totalCount,
            list,
            isLoading: false,
          });
        });
    });
  };

  fetchData = (overrides) => {
    const { pageIndex, activeType, keyword, tag } = this.state;
    const params = {
      pageIndex: pageIndex,
      pageSize: this.pageSize,
      isMine: activeType === 'mine',
      tag,
      keyword,
      ...overrides,
    };
    return axios('/api/demo/list', { params })
      .then((response) => {
        const { status, data } = response;
        if (status !== 200 || !data || !data.status === 'success') {
          Feedback.toast.error('数据异常');
          return null;
        } else {
          return data;
        }
      });
  };

  pageChangeHandler = (pageIndex) => {
    this.setState({
      isLoading: true,
    }, () => {
      this.fetchData({ pageIndex })
        .then(({ list, totalCount }) => {
          // 填充数据
          this.setState({
            pageIndex,
            totalCount,
            list,
            isLoading: false,
          });
        });
    });
  };
  deleteHandler = (id) => {
    Dialog.confirm({
      title: '删除',
      content: '确认要删除该区块？',
      onOk: () => {
        return axios({
          method: 'post',
          url: '/api/demo/delete',
          data: `id=${id}`,
        })
          .then((response) => {
            const { status, data } = response;
            if (status !== 200 || data.status !== 'success') {
              return Feedback.toast.error(data.status);
            } else {
              Feedback.toast.success('删除成功');
              const newList = this.state.list.filter(item => item.id !== id);
              this.setState({
                list: newList
              });
            }
          });
      }
    });
  };

  render() {
    const {
      activeType,
      isLoading,
      list,
      totalCount,
      pageIndex,
      error
    } = this.state;

    if (error) {
      return (<div>{JSON.stringify(error)}</div>);
    }

    return (
      <div className="playground-list demo-list-wrapper">
        <RadioGroup
          shape="button"
          size="large"
          style={{ marginRight: '20px' }}
          value={activeType}
          onChange={this.changeActiveType}
        >
          <Radio style={{ cursor: 'pointer' }} id="all" value="all">
            所有片段
          </Radio>
          <Radio style={{ cursor: 'pointer' }} id="mine" value="mine">
            我的片段
          </Radio>
        </RadioGroup>
        <SearchInput
          onPressEnter={value => {
            this.emit('playground:queryChange', {
              keyword: value
            });
          }}
        />
        <div className="demo-search-bar">
          <Tab
            defaultActiveKey="all"
            onChange={value => {
              value = value === 'all' ? '' : value;
              this.emit('playground:queryChange', {
                tag: encodeURIComponent(value)
              });
            }}
            tabBarExtraContent={
              <Link to="/playground/new">
                <Button type="primary">新建片段</Button>
              </Link>
            }
          >
            <Tab.TabPane tab="全部" key="all" />
            <Tab.TabPane tab="问题复现" key="问题复现" />
            <Tab.TabPane tab="demo 演示" key="demo 演示" />
            <Tab.TabPane tab="组件封装" key="组件封装" />
            <Tab.TabPane tab="常用布局" key="常用布局" />
          </Tab>
        </div>

        <div className="demo-list" style={{ margin: '20px 0' }}>
          <CustomTable
            isLoading={isLoading}
            list={list}
            deleteHandler={this.deleteHandler}
          />
        </div>

        <Pagination
          current={pageIndex}
          pageSize={this.pageSize}
          total={totalCount}
          onChange={this.pageChangeHandler}
        />
      </div>
    );
  }
}

const userInfo = getUserInfo();
function CustomTable(props) {
  const { list, isLoading } = props;

  const renderId = value => {
    return <Link to={`/playground/${value}`}>#{value}</Link>;
  };

  const renderUpdatedAt = value => {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  };

  const renderAction = (value, index, record) => {
    const hasAuth = userInfo.username === record.creator || userInfo.isAdmin === 'true';

    if (!hasAuth) {
      return '无权限';
    }

    return (
      <div>
        <Link to={`/playground/${record.id}`} style={{ marginRight: '20px' }}>
          编辑
        </Link>
        <Button shape="text" onClick={props.deleteHandler.bind(this, record.id)}>
          删除
        </Button>
      </div>
    );
  };

  return (
    <Table dataSource={list} isLoading={isLoading}>
      <Table.Column key="id" title="id" dataIndex="id" cell={renderId} />
      <Table.Column key="title" title="标题" dataIndex="title" />
      <Table.Column key="creator" title="创建者" dataIndex="creator" />
      <Table.Column key="updated_at" title="更新时间" dataIndex="updated_at" cell={renderUpdatedAt} />
      <Table.Column key="action" title="操作" dataIndex="action" cell={renderAction} />
    </Table>
  );
}