// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const fetchMachine = Machine(
  {
    id: "retailTradeDesk",
    initial: "entry",
    context: {
      loggedIn: false,
      allCampaigns: [],
      editing: {}
    },
    states: {
      entry: {
        on: {
          "": [
            {
              target: "#site",
              cond: "isLoggedIn"
            },
            {
              target: "login"
            }
          ]
        }
      },
      login: {
        initial: "loginScreen",
        id: "login",
        states: {
          loginScreen: {
            on: {
              SUCCESS: {
                target: "#site",
                actions: ["logIn"]
              },
              FAILURE: ""
            }
          }
        }
      },
      site: {
        initial: "dashboard",
        entry: ["fetchAllCampaigns", "fetchAllAudiences"],
        id: "site",
        on: {
          LOGOUT: {
            actions: ["logOut", 'clearCampaign'],
            target: "#login"
          }
        },
        states: {
          dashboard: {
            id: "dashboard",
            on: {
              CREATE_CAMPAIGN: {
                target: "createEditCampaign",
                actions: ["clearCampaign"]
              }
            }
          },
          createEditCampaign: {
            initial: "chooseAudience",
            states: {
              chooseAudience: {
                on: {
                  NEXT: {
                    target: "chooseBudget",
                    actions: ["setCampaignAudience"]
                  }
                }
              },
              chooseBudget: {
                on: {
                  NEXT: {
                    target: "chooseAsset",
                    actions: ["setCampaignBudget"]
                  }
                }
              },
              chooseAsset: {
                on: {
                  CREATE_NEW_ASSET: "#createAsset",
                  SELECT_EXISTING_ASSET: "#selectFromAssLibrary"
                }
              },
              createAsset: {
                id: "createAsset",
                initial: "selectAssetToUpload",
                states: {
                  selectAssetToUpload: {
                    on: {
                      SUCCESS: "setNameAndDescription"
                    }
                  },
                  setNameAndDescription: {
                    on: {
                      SUCCESS: "tryUpload"
                    }
                  },
                  tryUpload: {
                    on: {
                      SUCCESS: {
                        target: "#selectFromAssLibrary",
                        actions: ["uploadToS3"]
                      }
                    }
                  }
                }
              },
              selectFromAssetLibrary: {
                id: "selectFromAssLibrary",
                entry: ["fetchAllAssets"],
                on: {
                  PICK_ASSET: {
                    target: "#reviewCampaign",
                    actions: ["setCampaignAsset"]
                  }
                }
              }
            }
          },
          reviewCampaign: {
            id: "reviewCampaign",
            on: {
              LAUNCH_CAMPAIGN: {
                target: "dashboard",
                actions: ["launchCampaign", "clearCampaign"]
              },
              CONTINUE_EDITING: "createEditCampaign",
              CANCEL: {
                target: "dashboard",
                actions: ["clearCampaign"]
              }
            }
          }
        }
      }
    }
  },
  {
    actions: {
      launchCampaign: context => {
        context.allCampaigns = [...context.allCampaigns, context.editing];
      },
      clearCampaign: context => {
        context.editing = {
          audience: "",
          budget: "",
          asset: ""
        };
      },
      setCampaignAudience: context => {
        context.editing.audience = "big";
      },
      setCampaignBudget: context => {
        context.editing.budget = "huge";
      },
      setCampaignAsset: context => {
        context.editing.asset = "pic.jpg";
      },
      uploadToS3: () => {
        console.log("Upload file to AWS");
      },
      fetchAllAssets: () => {
        console.log("Fetching all assets from AWS");
      },
      fetchAllCampaigns: () => {
        console.log("Fetching all campaigns...");
      },
      fetchAllAudiences: () => {
        console.log("Fetching all audiences...");
      },
      logIn: ctx => {
        console.log("Log in.");
        ctx.loggedIn = true;
      },
      logOut: ctx => {
        ctx.loggedIn = false;
      }
    },
    guards: {
      isLoggedIn: ctx => ctx.loggedIn
    }
  }
);