import { h, Component } from 'preact';
import WBTable from 'wb-table';
import makeArvadosRequest from 'make-arvados-request';
import WBAccordion from 'wb-accordion';
import WBJsonViewer from 'wb-json-viewer';
import wbFormatSpecialValue from 'wb-format-special-value';
import WBLazyInlineName from 'wb-lazy-inline-name';
import wbFormatDate from 'wb-format-date';

class WBProjectFields extends Component {
  componentDidMount() {
    this.prepareRows();
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    this.prepareRows();
  }

  prepareRows() {
    let { uuid, app } = this.props;
    let { arvHost, arvToken } = app.state;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/groups/' + uuid);

    prom = prom.then(xhr => {
      const item = xhr.response;

      const rows = [
        [ 'Name', wbFormatSpecialValue(item.name) ],
        [ 'Description', wbFormatSpecialValue(item.description) ],
        [ 'Properties', (
          <WBAccordion names={[ 'Properties' ]} cardHeaderClass="card-header-sm">
            <WBJsonViewer app={ app } value={ item.properties } />
          </WBAccordion>
        ) ],
        [ 'Writable by', item.writable_by
          .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
          .reduce((a, b) => [].concat(a).concat(', ').concat(b))
        ],
        [ 'Trash At', wbFormatDate(item.trash_at) ],
        [ 'Delete At', wbFormatDate(item.delete_at) ],
        [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
      ];

      this.setState({ 'rows': rows });
    });
  }

  render({}, { rows }) {
    return (
      rows ? (
        <WBTable columns={ [ "Name", "Value" ] }
          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
          rows={ rows }
          verticalHeader={ true } />
      ) : (
        <div>Loading...</div>
      )
    );
  }
}

export default WBProjectFields;