Hide Elements

import IMGLYDesignEditor
import SwiftUI

/// Design Editor demonstrating how to hide UI elements.
///
/// This example shows how to:
/// - Hide the dock completely (the only UI component that fully hides)
/// - Remove specific items from any UI component
/// - Understand the distinction between hiding and removing
struct HideElementsEditorSolution: View {
  let settings = EngineSettings(
    license: secrets.licenseKey,
    userID: "<your unique user id>",
  )

  // To hide the dock completely, provide an empty closure to .imgly.dockItems
  // The dock is the only UI component that fully hides when given no items
  var editorWithHiddenDock: some View {
    DesignEditor(settings)
      .imgly.dockItems { _ in
        // Empty - dock will be completely hidden
      }
  }


  // To remove specific items from any component, use the modify variants
  // The component container remains visible, only the specified items are removed
  var editorWithRemovedItems: some View {
    DesignEditor(settings)
      .imgly.modifyDockItems { _, items in
        items.remove(id: Dock.Buttons.ID.elementsLibrary)
        items.remove(id: Dock.Buttons.ID.shapesLibrary)
      }
      .imgly.modifyNavigationBarItems { _, items in
        items.remove(id: NavigationBar.Buttons.ID.undo)
        items.remove(id: NavigationBar.Buttons.ID.redo)
      }
  }


  @State private var isPresented = false
  @State private var showHiddenDock = true

  var body: some View {
    VStack {
      Toggle("Hide Dock Completely", isOn: $showHiddenDock)
        .padding()

      Button("Use the Editor") {
        isPresented = true
      }
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        if showHiddenDock {
          editorWithHiddenDock
        } else {
          editorWithRemovedItems
        }
      }
    }
  }
}

#Preview {
  HideElementsEditorSolution()
}

// To hide the dock completely, provide an empty closure to .imgly.dockItems
// The dock is the only UI component that fully hides when given no items
var editorWithHiddenDock: some View {
  DesignEditor(settings)
    .imgly.dockItems { _ in
      // Empty - dock will be completely hidden
    }
}

// To remove specific items from any component, use the modify variants
// The component container remains visible, only the specified items are removed
var editorWithRemovedItems: some View {
  DesignEditor(settings)
    .imgly.modifyDockItems { _, items in
      items.remove(id: Dock.Buttons.ID.elementsLibrary)
      items.remove(id: Dock.Buttons.ID.shapesLibrary)
    }
    .imgly.modifyNavigationBarItems { _, items in
      items.remove(id: NavigationBar.Buttons.ID.undo)
      items.remove(id: NavigationBar.Buttons.ID.redo)
    }
}

.imgly.modifyDockItems { _, items in
  items.remove(id: Dock.Buttons.ID.elementsLibrary)
  items.remove(id: Dock.Buttons.ID.shapesLibrary)
}

.imgly.modifyNavigationBarItems { _, items in
  items.remove(id: NavigationBar.Buttons.ID.undo)
  items.remove(id: NavigationBar.Buttons.ID.redo)
}

// Canvas Menu
.imgly.modifyCanvasMenuItems { _, items in
  items.remove(id: CanvasMenu.Buttons.ID.bringForward)
  items.remove(id: CanvasMenu.Buttons.ID.sendBackward)
}

// Inspector Bar
.imgly.modifyInspectorBarItems { _, items in
  items.remove(id: InspectorBar.Buttons.ID.crop)
  items.remove(id: InspectorBar.Buttons.ID.filter)
}

DesignEditor(settings)
  .imgly.dockItems { _ in
    // Empty - dock hidden
  }

DesignEditor(settings)
  .imgly.modifyDockItems { _, items in
    // Keep only essential tools
    items.remove(id: Dock.Buttons.ID.stickersLibrary)
    items.remove(id: Dock.Buttons.ID.shapesLibrary)
  }

DesignEditor(settings)
  .imgly.modifyNavigationBarItems { _, items in
    // Remove undo/redo for simpler interface
    items.remove(id: NavigationBar.Buttons.ID.undo)
    items.remove(id: NavigationBar.Buttons.ID.redo)
  }

DesignEditor(settings)
  .imgly.dockItems { _ in
    // Hide dock completely
  }
  .imgly.modifyNavigationBarItems { _, items in
    // Remove specific navigation buttons
    items.remove(id: NavigationBar.Buttons.ID.undo)
  }

// ✅ Correct - hides dock completely
.imgly.dockItems { _ in
  // Empty - dock hidden
}

// ❌ Wrong - modifies items but doesn't hide container
.imgly.modifyDockItems { _, items in
  // Even if empty, container remains visible
}

// ❌ Won't hide navigation bar container
.imgly.navigationBarItems { _ in }

// ✅ Remove all items instead
.imgly.modifyNavigationBarItems { _, items in
  items.remove(id: NavigationBar.Buttons.ID.undo)
  items.remove(id: NavigationBar.Buttons.ID.redo)
  items.remove(id: NavigationBar.Buttons.ID.export)
  items.remove(id: NavigationBar.Buttons.ID.closeEditor)
}

// ✅ Use correct component's ID enum
.imgly.modifyDockItems { _, items in
  items.remove(id: Dock.Buttons.ID.elementsLibrary)  // Dock ID for dock
}

.imgly.modifyNavigationBarItems { _, items in
  items.remove(id: NavigationBar.Buttons.ID.undo)  // Navbar ID for navbar
}

// ❌ Wrong - mixing component IDs
.imgly.modifyDockItems { _, items in
  items.remove(id: NavigationBar.Buttons.ID.undo)  // Wrong component!
}

// ✅ Verify button exists in component
// Check Dock.Buttons.ID, NavigationBar.Buttons.ID, etc. enums

// ✅ Use ID constants, not strings
items.remove(id: Dock.Buttons.ID.elementsLibrary)  // Correct

// ❌ Don't use string literals
items.remove(id: "elementsLibrary")  // Error-prone

// ✅ Don't remove same ID twice
items.remove(id: Dock.Buttons.ID.elementsLibrary)
// items.remove(id: Dock.Buttons.ID.elementsLibrary)  // Error!