import Modal from 'react-modal';
import React, { PureComponent } from 'react';

class CreateTicket extends PureComponent {
  render() {
    emptyTicketState = {
      budget: '',
      description: '',
      expanded: false,
      hasCompletedTicket: false,
      initialDescription: '',
      newTicketId: '',
      phases: [],
      phaseValue: '',
      projects: [],
      projectValue: '',
      selectedPhase: {},
      selectedProject: {},
      summary: '',
      ticketType: 'project',
    }

    state = {
      ...this.emptyTicketState
    }

    componentDidMount = () => {
      this.getProjects();
    }

	  componentDidUpdate = (prevProps) => {
      if (prevProps.projects !== this.props.projects) {
        this.getProjects();      
      }

      if (prevProps.selectedProject !== this.props.selectedProject) {
        const { selectedProject } = this.props;
        if (selectedProject['project.name']) {
          this.getPhases(this.state.projects.filter(project => (
            project.name === selectedProject['project.name'] &&
            project.company.name === selectedProject['project.company']
          )));

          this.setState({
            selectedProject: this.state.projects.filter(project => (
              project.name === `${selectedProject['company.name']} — ${selectedProject['project.name']}`)
            )
          });
        }
      }
    }

    getPhases = () => {
      let phases = [];
      const { selectedProject } = this.props;

      this.props.tickets.map(ticket => {
        if (selectedProject['project.name'] === ticket.project.name && selectedProject['company.name'] === ticket.company.name) {
          phases.push({
            path: ticket.phase.path,
            phaseId: ticket.phase.id,
            ticketId: ticket.id
          });
        }
      });

      this.setState({
        phases
      });
    }

    getProjects = () => {
      let projects = [];

      this.props.projects.map(project => {
        projects.push({
          name: `${project.company.name} — ${project.project.name}`,
          id: project.project.id,
          companyId: project.company.id
        });
      });

      this.setState({
        projects
      });
    }

    createNewTicket = () => {
      const projectTicketDetails = ({
        summary: this.state.summary,
        recordType: 'ProjectTicket',
        company: { id: this.state.selectedProject[0].companyId },
        project: { id: this.state.selectedProject[0].id },
        phase: { id: this.state.selectedPhase[0].phaseId },
        budgetHours: this.state.budget,
        initialDescription: this.state.initialDescription,
      })

      // @todo allow service ticket creation
      const serviceTicketDetails = ({
        summary: this.state.summary,
        recordType: 'ServiceTicket',
        company: { id: this.state.selectedProject[0].companyId },
        agreement: '', // where is this?
        budgetHours: this.state.budget,
        initialDescription: this.state.initialDescription,
      })

      if (this.state.ticketType === 'project') {
        createTicket(projectTicketDetails).then(res => {
          this.setState({
            newTicketId: res.result.id
          })
        })
      }

      if (this.state.ticketType === 'service') {
        createTicket(serviceTicketDetails);
      }
    };

    expandAddTicketForm = () => {
      this.setState({
        expanded: !this.state.expanded
      })
    }

    selectTicketType = event => {
      this.setState({
        ticketType: event.target.value
      })
    }

    resetTicketDetails = () => {
      this.setState({
        ...this.emptyTicketState,
      });
    }

    return (
      <div className="create-ticket-form">
        {this.props.selectedProject['company.name'] && (
          <button
            className="btn btn-default btn-md btn-expand"
            type="button"
            onClick={() => this.expandAddTicketForm()}
          >
            {this.state.expanded ? '—' : '＋'} Create Ticket
          </button>
        )}
        <Modal
          contentLabel="Create Ticket Modal"
          isOpen={this.state.expanded}
          overlayClassName="modal-overlay ticket-modal"
          onRequestClose={this.expandAddTicketForm}
          shouldCloseOnOverlayClick={true}
        >
          <form>
            <div>
              <label htmlFor="projects">Project</label><br></br>
              <input
                id="projects"
                className="form-control"
                disabled="disabled"
                value={`${this.props.selectedProject['company.name']} — ${this.props.selectedProject['project.name']}`}
              />
            </div>
          </form>
        </Modal>
      </div>
    )
  }
}

export default CreateTicket;

@@ -1,20 +1,39 @@
 import 
-Modal
+React, %7B PureComponent %7D
  from 'r
@@ -36,22 +36,16 @@
 m 'react
--modal
 ';%0Aimpor
@@ -50,32 +50,60 @@
 ort 
-React, %7B PureComponent %7D
+Autocomplete from 'react-autocomplete';%0Aimport Modal
  fro
@@ -110,16 +110,22 @@
 m 'react
+-modal
 ';%0A%0Aclas
@@ -4724,24 +4724,1050 @@
      %3C/div%3E%0A
+            %3Cdiv className=%22autocomplete-field%22%3E%0A              %3Clabel htmlFor=%22phases%22%3EPhase%3C/label%3E%3Cbr%3E%3C/br%3E%0A              %3CAutocomplete%0A                id=%22phases%22%0A                items=%7Bthis.state.phases%7D%0A                getItemValue=%7Bitem =%3E item.path%7D%0A                shouldItemRender=%7B(item, value) =%3E item.path.toLowerCase().indexOf(value.toLowerCase()) %3E -1%7D%0A                renderItem=%7Bitem =%3E (%0A                  %3Cdiv key=%7B%60$%7Bitem.phaseId%7D-$%7Bitem.ticketId%7D%60%7D%3E%0A                    %7Bitem.path%7D%0A                  %3C/div%3E%0A                )%7D%0A                value=%7Bthis.state.phaseValue%7D%0A                inputProps=%7B%7B className: %22autocomplete-input form-control%22 %7D%7D%0A                onChange=%7Be =%3E this.setState(%7B phaseValue: e.target.value %7D)%7D%0A                onSelect=%7Bvalue =%3E %7B%0A                  this.setState(%7B%0A                    phaseValue: value,%0A                    selectedPhase: this.state.phases.filter(phase =%3E phase.path === value),%0A                  %7D)%0A                %7D%7D%0A              /%3E%0A            %3C/div%3E%0A
           %3C/

Add dropdown that loads the phases relevant to the active project