Add a New Button

// swiftlint:disable unused_closure_parameter
// swiftformat:disable unusedArguments
import IMGLYDesignEditor
import SwiftUI

/// Design Editor demonstrating how to add custom buttons to different UI locations.
///
/// This example shows how to:
/// - Add a custom button to the Dock
/// - Add a custom button to the Canvas Menu
/// - Add a custom button to the Inspector Bar
/// - Add a custom button to the Navigation Bar
/// - Use conditional visibility and enabled states
/// - Apply proper ID naming conventions
struct AddButtonEditorSolution: View {
  let settings = EngineSettings(license: secrets.licenseKey,
                                userID: "<your unique user id>")

  var editor: some View {
    DesignEditor(settings)
      .imgly.modifyDockItems { context, items in
        items.addFirst {
          Dock.Button(
            id: "my.app.dock.button.export",
            action: { context in
              print("Custom export button tapped")
            },
            label: { context in
              Label("Export", systemImage: "square.and.arrow.up")
            },
          )
        }
      }
      .imgly.modifyCanvasMenuItems { context, items in
        items.addFirst {
          CanvasMenu.Button(
            id: "my.app.canvasMenu.button.favorite",
            action: { context in
              print("Favorite button tapped")
            },
            label: { context in
              Label("Favorite", systemImage: "star.fill")
            },
            // Disable for stickers (shows grayed out)
            isEnabled: { context in
              context.selection.kind != "sticker"
            },
            // Only show for graphic blocks (hidden otherwise)
            isVisible: { context in
              context.selection.type == .graphic
            },
          )
        }
      }
      .imgly.modifyInspectorBarItems { context, items in
        items.addFirst {
          InspectorBar.Button(
            id: "my.app.inspectorBar.button.process",
            action: { context in
              print("Process button tapped")
            },
            label: { context in
              Label("Process", systemImage: "gearshape")
            },
            // Disable for text blocks (shows grayed out)
            isEnabled: { context in
              context.selection.type != .text
            },
            // Only show for blocks with fill (hidden otherwise)
            isVisible: { context in
              context.selection.fillType != nil
            },
          )
        }
      }
      .imgly.navigationBarItems { context in
        NavigationBar.ItemGroup(placement: .topBarLeading) {
          NavigationBar.Buttons.closeEditor()
        }
      }
      .imgly.modifyNavigationBarItems { context, items in
        // Add to trailing side
        items.addFirst(placement: .topBarTrailing) {
          NavigationBar.Button(
            id: "my.app.navbar.button.help",
          ) { context in
            print("Help button tapped")
          } label: { context in
            Label("Help", systemImage: "questionmark.circle")
          }
        }

        // Add to leading side
        items.addLast(placement: .topBarLeading) {
          NavigationBar.Button(
            id: "my.app.navbar.button.settings",
          ) { context in
            print("Settings button tapped")
          } label: { context in
            Label("Settings", systemImage: "gearshape")
          }
        }
      }
  }

  @State private var isPresented = false

  var body: some View {
    Button("Use the Editor") {
      isPresented = true
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        editor
      }
    }
  }
}

#Preview {
  AddButtonEditorSolution()
}

.imgly.modifyDockItems { context, items in
  items.addFirst {
    Dock.Button(
      id: "my.app.dock.button.export",
      action: { context in
        print("Custom export button tapped")
      },
      label: { context in
        Label("Export", systemImage: "square.and.arrow.up")
      },
    )
  }
}

.imgly.modifyCanvasMenuItems { context, items in
  items.addFirst {
    CanvasMenu.Button(
      id: "my.app.canvasMenu.button.favorite",
      action: { context in
        print("Favorite button tapped")
      },
      label: { context in
        Label("Favorite", systemImage: "star.fill")
      },
      // Disable for stickers (shows grayed out)
      isEnabled: { context in
        context.selection.kind != "sticker"
      },
      // Only show for graphic blocks (hidden otherwise)
      isVisible: { context in
        context.selection.type == .graphic
      },
    )
  }
}

// Disable for stickers (shows grayed out)
isEnabled: { context in
  context.selection.kind != "sticker"
},
// Only show for graphic blocks (hidden otherwise)
isVisible: { context in
  context.selection.type == .graphic
},

.imgly.modifyInspectorBarItems { context, items in
  items.addFirst {
    InspectorBar.Button(
      id: "my.app.inspectorBar.button.process",
      action: { context in
        print("Process button tapped")
      },
      label: { context in
        Label("Process", systemImage: "gearshape")
      },
      // Disable for text blocks (shows grayed out)
      isEnabled: { context in
        context.selection.type != .text
      },
      // Only show for blocks with fill (hidden otherwise)
      isVisible: { context in
        context.selection.fillType != nil
      },
    )
  }
}

  .imgly.modifyNavigationBarItems { context, items in
    // Add to trailing side
    items.addFirst(placement: .topBarTrailing) {
      NavigationBar.Button(
        id: "my.app.navbar.button.help",
      ) { context in
        print("Help button tapped")
      } label: { context in
        Label("Help", systemImage: "questionmark.circle")
      }
    }

    // Add to leading side
    items.addLast(placement: .topBarLeading) {
      NavigationBar.Button(
        id: "my.app.navbar.button.settings",
      ) { context in
        print("Settings button tapped")
      } label: { context in
        Label("Settings", systemImage: "gearshape")
      }
    }
  }