import React from 'react';
import { DemoPanel } from '../../../external/demo/index';
import AutoCollapseTable from '../lib/AutoCollapseTable';
import { mockCGI } from './util';

export default class AutoCollapseTableDemo extends React.Component {

  fetch = (query) => {
    return new Promise((resolve) => {
      mockCGI(query).then(json => {
        let rows = json.data;
        let total = json.total;
        resolve({
          rows,
          total,
        });
      });
    });
  }

  translateRow = (rowData) => {
    return {
      row: [
        rowData.A,
        rowData.B,
        // owner
        `${rowData.C}-${rowData.D}`,
      ],
      collapseRows: rowData.sub,
    };
  }

  render() {
    return (
      <div>
        <DemoPanel title="AutoCollapseTableDemo">
          <AutoCollapseTable
            maxRow={3}
            cols={[
              { display: 'A', width: 10 },
              { sort: [{ display: 'B', key: 'B', value: -1 }], width: 15 },
              { sort: [{ display: 'C', key: 'C', value: 1 }, { display: 'D', key: 'D' }], width: 8 },
            ]}
            fetch={this.fetch}
            translateRow={this.translateRow}
          />
        </DemoPanel>
      </div>
    );
  }
}