const canOpenUnsavedChanges = (context, event, { state }) => !state?.matches('open.hasSearch.searchResults.hasSearchResults.saveAsOpen');

const canOpenSaveAsSubDialog = (context, event, { state }) => !state?.matches('open.hasSearch.unsavedChanges.unsavedOpen');

const hasSearchResultsStates = {
  initial: 'saveAsClosed',
  states: {
    saveAsClosed: {
      on: { 
        TOGGLE_SAVE_AS: [
          {
            target: 'saveAsOpen',
            cond: 'canOpenSaveAsSubDialog'
          }
        ]
      }
    },
    saveAsOpen: {
      on: { 
        TOGGLE_SAVE_AS: 'saveAsClosed'
      }
    }
  }
}
  
const hasSearchStates = {
  type: 'parallel',
  states: {
    unsavedChanges: {
      initial: 'unsavedClosed',
      states: {
        unsavedClosed: {
          on: { 
            TOGGLE_UNSAVED: [
              {
                target: 'unsavedOpen',
                cond: 'canOpenUnsavedChanges'
              }
            ]
          }
        },
        unsavedOpen: {
          on: { 
            TOGGLE_UNSAVED: 'unsavedClosed'
          }
        }
      }
    },
    searchResults: {
      initial: 'noSearchResults',  
      states: {
        noSearchResults: {
          on: {
            SUCCESSFUL_SEARCH: 'hasSearchResults'
          }
        },
        hasSearchResults: {
          on: {
            UNSUCCESSFUL_SEARCH: 'noSearchResults'
          },
          ...hasSearchResultsStates
        }
      }
    }
  }
}
  
const openStates = {
  initial: 'noSearch',
  states: {
    noSearch: {
      on: {
        SEARCH_SPECIFIED: 'hasSearch'
      }
    },
    hasSearch: {
      on: {
        SEARCH_CLEARED: 'noSearch'
      },
      ...hasSearchStates
    }
  }
}
  
const findDialogMachine = Machine({
  id: 'findDialog',
  initial: 'closed',
  states: {
    closed: {
      on: {
        TOGGLE_FIND: 'open'
      }
    },
    open: {
      on: {
        TOGGLE_FIND: 'closed'
      },
      ...openStates
    }
  }
}, {
  guards: {
    canOpenUnsavedChanges, canOpenSaveAsSubDialog
  }
});