import React from 'react';
import PropTypes from 'prop-types';
import Relay from 'react-relay/classic';
import DocumentTitle from 'react-document-title';

import Icon from '../shared/Icon';
import Panel from '../shared/Panel';
import PageHeader from '../shared/PageHeader';
import ShowMoreFooter from '../shared/ShowMoreFooter';

import AuditLogRow from './row';

const PAGE_SIZE = 30;

class AuditLogIndex extends React.PureComponent {
  static propTypes = {
    organization: PropTypes.shape({
      name: PropTypes.string.isRequired,
      auditEvents: PropTypes.shape({
        edges: PropTypes.array
      }).isRequired
    }).isRequired,
    relay: PropTypes.object.isRequired
  };

  state = {
    loading: false
  };

  render() {
    return (
      <DocumentTitle title={`Audit Log · ${this.props.organization.name}`}>
        <div>
          <PageHeader>
            <PageHeader.Icon>
              <Icon
                icon="eye"
                className="align-middle mr2"
                style={{ width: 40, height: 40 }}
              />
            </PageHeader.Icon>
            <PageHeader.Title>
              Audit Log
            </PageHeader.Title>
            <PageHeader.Description>
              Event log of all organization activity
            </PageHeader.Description>
          </PageHeader>

          {this.renderDetailsPanel()}
        </div>
      </DocumentTitle>
    );
  }

  renderDetailsPanel() {
    return (
      <Panel>
        <Panel.Section>
          <span className="semi-bold">Controls and stuff go here</span>
        </Panel.Section>

        {this.props.organization.auditEvents.edges.map((edge) => (
          <AuditLogRow
            key={edge.node.id}
            auditEvent={edge.node}
          />
        ))}

        <ShowMoreFooter
          connection={this.props.organization.auditEvents}
          loading={this.state.loading}
          onShowMore={this.handleShowMoreAuditEvents}
        />
      </Panel>
    );
  }

  handleShowMoreAuditEvents = () => {
    this.setState({ loading: true });

    this.props.relay.setVariables(
      {
        pageSize: this.props.relay.variables.pageSize + PAGE_SIZE
      },
      (readyState) => {
        if (readyState.done) {
          this.setState({ loading: false });
        }
      }
    );
  };
}

export default Relay.createContainer(AuditLogIndex, {
  initialVariables: {
    pageSize: PAGE_SIZE
  },

  fragments: {
    organization: () => Relay.QL`
      fragment on Organization {
        name
        auditEvents(first: $pageSize) {
          edges {
            node {
              id
              ${AuditLogRow.getFragment('auditEvent')}
            }
          }
          ${ShowMoreFooter.getFragment('connection')}
        }
      }
    `
  }
});

@@ -144,24 +144,67 @@
 nt-title';%0A%0A
+import Dropdown from '../shared/Dropdown';%0A
 import Icon 
@@ -222,24 +222,24 @@
 ared/Icon';%0A
-
 import Panel
@@ -423,16 +423,183 @@
  = 30;%0A%0A
+const EVENT_SUBJECTS = %5B%0A  %7B name: 'Any Subject', id: null %7D,%0A  %7B name: 'Pipeline events', id: 'PIPELINE' %7D,%0A  %7B name: 'Organization events', id: 'ORGANIZATION' %7D%0A%5D;%0A%0A
 class Au
@@ -1707,66 +1707,395 @@
    %3C
-span className=%22semi-bold%22%3EControls and stuff go here%3C/spa
+Dropdown width=%7B180%7D ref=%7B(_eventSubjectDropdown) =%3E this._eventSubjectDropdown = _eventSubjectDropdown%7D%3E%0A            %3Cdiv className=%22underline-dotted cursor-pointer inline-block regular dark-gray%22%3E%0A              %7BEVENT_SUBJECTS.find((subject) =%3E subject.id === this.props.relay.variables.subjectType).name%7D%0A            %3C/div%3E%0A            %7Bthis.renderEventSubjects()%7D%0A          %3C/Dropdow
 n%3E%0A 
@@ -2839,16 +2839,778 @@
  );%0A  %7D;
+%0A%0A  renderEventSubjects() %7B%0A    return EVENT_SUBJECTS.map((subject) =%3E %7B%0A      return (%0A        %3Cdiv%0A          key=%7B%60subject-$%7Bsubject.id%7D%60%7D%0A          className=%22btn block hover-bg-silver%22%0A          onClick=%7B() =%3E %7B%0A            this._eventSubjectDropdown.setShowing(false);%0A            this.handleEventSubjectSelect(subject.id);%0A          %7D%7D%0A        %3E%0A          %3Cspan className=%22block%22%3E%7Bsubject.name%7D%3C/span%3E%0A        %3C/div%3E%0A      );%0A    %7D);%0A  %7D%0A%0A  handleEventSubjectSelect = (subjectType) =%3E %7B%0A    this.setState(%7B loading: true %7D);%0A%0A    this.props.relay.setVariables(%0A      %7B%0A        pageSize: PAGE_SIZE,%0A        subjectType%0A      %7D,%0A      (readyState) =%3E %7B%0A        if (readyState.done) %7B%0A          this.setState(%7B loading: false %7D);%0A        %7D%0A      %7D%0A    );%0A  %7D;
 %0A%7D%0A%0Aexpo
@@ -3704,16 +3704,39 @@
 AGE_SIZE
+,%0A    subjectType: null
 %0A  %7D,%0A%0A 
@@ -3829,16 +3829,16 @@
    name%0A
-
         
@@ -3865,16 +3865,44 @@
 pageSize
+, subject_type: $subjectType
 ) %7B%0A    

Allow filtering by subject type