import SwiftUI

/// A horizontal row of chips, each with a remove button: an issue's
/// labels and assignees, a merge request's labels. The remove button is
/// identified as `<idPrefix>-remove-<item>`.
struct RemovableChips: View {

    let items: [String]
    let idPrefix: String
    let disabled: Bool
    var color: (String) -> Color = { _ in .secondary }
    let remove: (String) -> Void

    /// Extends the remove button's hit area to about 44pt without
    /// changing the chip's layout.
    private static let hitPadding: CGFloat = 16

    var body: some View {
        if !items.isEmpty {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 6) {
                    ForEach(items, id: \.self) { item in
                        HStack(spacing: 3) {
                            Text(item)
                            Button {
                                remove(item)
                            } label: {
                                Image(systemName: "xmark.circle.fill")
                                    .foregroundStyle(.tertiary)
                                    .padding(Self.hitPadding)
                                    .contentShape(Rectangle())
                                    .padding(-Self.hitPadding)
                            }
                            .disabled(disabled)
                            .accessibilityLabel("Remove \(item)")
                            .accessibilityIdentifier("\(idPrefix)-remove-\(item)")
                        }
                        .font(.gbSans(.caption))
                        .padding(.horizontal, 8)
                        .padding(.vertical, 3)
                        .background(color(item).opacity(0.07), in: gbChipShape)
                        .overlay(gbChipShape.stroke(color(item).opacity(0.35), lineWidth: 1))
                    }
                }
                .padding(.vertical, Self.hitPadding)
            }
            .padding(.vertical, -Self.hitPadding)
        }
    }
}