372 lines
13 KiB
Swift
372 lines
13 KiB
Swift
//
|
|
// TeamFirstWizardStep.swift
|
|
// SportsTime
|
|
//
|
|
// Wizard step for Team-First planning mode.
|
|
// Uses sheet-based drill-down matching TeamPickerStep: Sport → Teams (multi-select).
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
struct TeamFirstWizardStep: View {
|
|
@Environment(\.colorScheme) private var colorScheme
|
|
|
|
@Binding var selectedSport: Sport?
|
|
@Binding var selectedTeamIds: Set<String>
|
|
|
|
@State private var showTeamPicker = false
|
|
|
|
private var selectedTeams: [Team] {
|
|
selectedTeamIds.compactMap { teamId in
|
|
AppDataProvider.shared.teams.first { $0.id == teamId }
|
|
}.sorted { $0.fullName < $1.fullName }
|
|
}
|
|
|
|
private var isValid: Bool {
|
|
selectedTeamIds.count >= 2
|
|
}
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
|
StepHeader(
|
|
title: "Which teams do you want to see?",
|
|
subtitle: "Select 2 or more teams to find optimal trip windows"
|
|
)
|
|
|
|
if !selectedTeams.isEmpty {
|
|
HStack(spacing: Theme.Spacing.sm) {
|
|
Button {
|
|
showTeamPicker = true
|
|
} label: {
|
|
HStack {
|
|
teamPreview
|
|
Spacer()
|
|
}
|
|
.contentShape(Rectangle())
|
|
}
|
|
.buttonStyle(.plain)
|
|
|
|
Button {
|
|
selectedTeamIds.removeAll()
|
|
selectedSport = nil
|
|
} label: {
|
|
Image(systemName: "xmark.circle.fill")
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
}
|
|
.buttonStyle(.plain)
|
|
.minimumHitTarget()
|
|
.accessibilityLabel("Clear all teams")
|
|
}
|
|
.padding(Theme.Spacing.md)
|
|
.background(Theme.cardBackgroundElevated(colorScheme))
|
|
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
|
|
.stroke(Theme.warmOrange, lineWidth: 2)
|
|
)
|
|
} else {
|
|
// Selection button
|
|
Button {
|
|
showTeamPicker = true
|
|
} label: {
|
|
HStack {
|
|
Image(systemName: "person.2.fill")
|
|
.foregroundStyle(Theme.warmOrange)
|
|
.accessibilityHidden(true)
|
|
|
|
Text("Select teams")
|
|
.font(.subheadline)
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
|
|
Spacer()
|
|
|
|
Image(systemName: "chevron.right")
|
|
.font(.caption)
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
.accessibilityHidden(true)
|
|
}
|
|
.padding(Theme.Spacing.md)
|
|
.background(Theme.cardBackgroundElevated(colorScheme))
|
|
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
|
|
.stroke(Theme.textMuted(colorScheme).opacity(0.3), lineWidth: 1)
|
|
)
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
|
|
// Validation message
|
|
if selectedTeamIds.isEmpty {
|
|
validationLabel(text: "Select at least 2 teams", isValid: false)
|
|
} else if selectedTeamIds.count == 1 {
|
|
validationLabel(text: "Select 1 more team (minimum 2)", isValid: false)
|
|
} else {
|
|
validationLabel(text: "Ready to find trips for \(selectedTeamIds.count) teams", isValid: true)
|
|
}
|
|
}
|
|
.padding(Theme.Spacing.lg)
|
|
.background(Theme.cardBackground(colorScheme))
|
|
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
|
.overlay {
|
|
RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
|
|
.stroke(Theme.surfaceGlow(colorScheme), lineWidth: 1)
|
|
}
|
|
.sheet(isPresented: $showTeamPicker) {
|
|
TeamFirstPickerSheet(
|
|
selectedSport: $selectedSport,
|
|
selectedTeamIds: $selectedTeamIds,
|
|
isPresented: $showTeamPicker
|
|
)
|
|
}
|
|
}
|
|
|
|
// MARK: - Team Preview
|
|
|
|
@ViewBuilder
|
|
private var teamPreview: some View {
|
|
if selectedTeams.count <= 3 {
|
|
// Show individual teams
|
|
HStack(spacing: Theme.Spacing.sm) {
|
|
ForEach(selectedTeams.prefix(3)) { team in
|
|
HStack(spacing: Theme.Spacing.xs) {
|
|
Circle()
|
|
.fill(team.primaryColor.map { Color(hex: $0) } ?? team.sport.themeColor)
|
|
.frame(width: 20, height: 20)
|
|
|
|
Text(team.abbreviation)
|
|
.font(.caption)
|
|
.fontWeight(.medium)
|
|
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
}
|
|
.padding(.horizontal, Theme.Spacing.sm)
|
|
.padding(.vertical, Theme.Spacing.xs)
|
|
.background(Theme.cardBackground(colorScheme))
|
|
.clipShape(Capsule())
|
|
}
|
|
}
|
|
} else {
|
|
// Show count with first few team colors
|
|
HStack(spacing: -8) {
|
|
ForEach(Array(selectedTeams.prefix(4).enumerated()), id: \.element.id) { index, team in
|
|
Circle()
|
|
.fill(team.primaryColor.map { Color(hex: $0) } ?? team.sport.themeColor)
|
|
.frame(width: 24, height: 24)
|
|
.overlay(
|
|
Circle()
|
|
.stroke(Theme.cardBackgroundElevated(colorScheme), lineWidth: 2)
|
|
)
|
|
.zIndex(Double(4 - index))
|
|
}
|
|
}
|
|
.accessibilityHidden(true)
|
|
|
|
Text("\(selectedTeamIds.count) teams")
|
|
.font(.subheadline)
|
|
.fontWeight(.medium)
|
|
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
}
|
|
}
|
|
|
|
private func validationLabel(text: String, isValid: Bool) -> some View {
|
|
HStack(spacing: Theme.Spacing.xs) {
|
|
Image(systemName: isValid ? "checkmark.circle.fill" : "info.circle.fill")
|
|
.foregroundStyle(isValid ? .green : Theme.warmOrange)
|
|
|
|
Text(text)
|
|
.font(.caption)
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Team First Picker Sheet
|
|
|
|
private struct TeamFirstPickerSheet: View {
|
|
@Environment(\.colorScheme) private var colorScheme
|
|
|
|
@Binding var selectedSport: Sport?
|
|
@Binding var selectedTeamIds: Set<String>
|
|
@Binding var isPresented: Bool
|
|
|
|
var body: some View {
|
|
NavigationStack {
|
|
List {
|
|
ForEach(Sport.supported, id: \.self) { sport in
|
|
NavigationLink {
|
|
TeamMultiSelectListView(
|
|
sport: sport,
|
|
selectedTeamIds: $selectedTeamIds,
|
|
onDone: {
|
|
selectedSport = sport
|
|
isPresented = false
|
|
}
|
|
)
|
|
} label: {
|
|
HStack(spacing: Theme.Spacing.sm) {
|
|
Image(systemName: sport.iconName)
|
|
.font(.title2)
|
|
.foregroundStyle(sport.themeColor)
|
|
.frame(width: 32)
|
|
|
|
Text(sport.rawValue)
|
|
.font(.body)
|
|
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
|
|
Spacer()
|
|
|
|
Text("\(teamsCount(for: sport)) teams")
|
|
.font(.caption)
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
}
|
|
.padding(.vertical, Theme.Spacing.xs)
|
|
}
|
|
}
|
|
}
|
|
.listStyle(.plain)
|
|
.navigationTitle("Select Sport")
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
.toolbar {
|
|
ToolbarItem(placement: .cancellationAction) {
|
|
Button("Cancel") { isPresented = false }
|
|
}
|
|
}
|
|
}
|
|
.presentationDetents([.large])
|
|
}
|
|
|
|
private func teamsCount(for sport: Sport) -> Int {
|
|
AppDataProvider.shared.teams.filter { $0.sport == sport }.count
|
|
}
|
|
}
|
|
|
|
// MARK: - Team Multi-Select List View
|
|
|
|
private struct TeamMultiSelectListView: View {
|
|
@Environment(\.colorScheme) private var colorScheme
|
|
|
|
let sport: Sport
|
|
@Binding var selectedTeamIds: Set<String>
|
|
let onDone: () -> Void
|
|
|
|
@State private var searchText = ""
|
|
|
|
private var teams: [Team] {
|
|
let allTeams = AppDataProvider.shared.teams
|
|
.filter { $0.sport == sport }
|
|
.sorted { $0.fullName < $1.fullName }
|
|
|
|
if searchText.isEmpty {
|
|
return allTeams
|
|
}
|
|
|
|
return allTeams.filter {
|
|
$0.fullName.localizedCaseInsensitiveContains(searchText) ||
|
|
$0.city.localizedCaseInsensitiveContains(searchText)
|
|
}
|
|
}
|
|
|
|
private var selectionCount: Int {
|
|
// Count only teams from the current sport
|
|
let sportTeamIds = Set(AppDataProvider.shared.teams.filter { $0.sport == sport }.map { $0.id })
|
|
return selectedTeamIds.intersection(sportTeamIds).count
|
|
}
|
|
|
|
var body: some View {
|
|
List {
|
|
ForEach(teams) { team in
|
|
Button {
|
|
toggleTeam(team)
|
|
} label: {
|
|
HStack(spacing: Theme.Spacing.sm) {
|
|
Circle()
|
|
.fill(team.primaryColor.map { Color(hex: $0) } ?? sport.themeColor)
|
|
.frame(width: 28, height: 28)
|
|
|
|
VStack(alignment: .leading, spacing: 2) {
|
|
Text(team.fullName)
|
|
.font(.body)
|
|
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
|
|
Text(team.city)
|
|
.font(.caption)
|
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
}
|
|
|
|
Spacer()
|
|
|
|
if selectedTeamIds.contains(team.id) {
|
|
Image(systemName: "checkmark.circle.fill")
|
|
.foregroundStyle(Theme.warmOrange)
|
|
.accessibilityHidden(true)
|
|
} else {
|
|
Image(systemName: "circle")
|
|
.foregroundStyle(Theme.textMuted(colorScheme).opacity(0.5))
|
|
.accessibilityHidden(true)
|
|
}
|
|
}
|
|
.padding(.vertical, Theme.Spacing.xs)
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityAddTraits(selectedTeamIds.contains(team.id) ? .isSelected : [])
|
|
}
|
|
}
|
|
.listStyle(.plain)
|
|
.searchable(text: $searchText, prompt: "Search teams")
|
|
.navigationTitle(sport.rawValue)
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
.toolbar {
|
|
ToolbarItem(placement: .confirmationAction) {
|
|
Button {
|
|
onDone()
|
|
} label: {
|
|
if selectionCount >= 2 {
|
|
Text("Done (\(selectionCount))")
|
|
.fontWeight(.semibold)
|
|
} else {
|
|
Text("Done")
|
|
}
|
|
}
|
|
.disabled(selectionCount < 2)
|
|
}
|
|
}
|
|
.onAppear {
|
|
// Clear selections from other sports when entering
|
|
let sportTeamIds = Set(AppDataProvider.shared.teams.filter { $0.sport == sport }.map { $0.id })
|
|
selectedTeamIds = selectedTeamIds.intersection(sportTeamIds)
|
|
}
|
|
}
|
|
|
|
private func toggleTeam(_ team: Team) {
|
|
Theme.Animation.withMotion(.easeInOut(duration: 0.15)) {
|
|
if selectedTeamIds.contains(team.id) {
|
|
selectedTeamIds.remove(team.id)
|
|
} else {
|
|
selectedTeamIds.insert(team.id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Preview
|
|
|
|
#Preview("Empty") {
|
|
TeamFirstWizardStep(
|
|
selectedSport: .constant(nil),
|
|
selectedTeamIds: .constant([])
|
|
)
|
|
.padding()
|
|
.themedBackground()
|
|
}
|
|
|
|
#Preview("Teams Selected") {
|
|
TeamFirstWizardStep(
|
|
selectedSport: .constant(.mlb),
|
|
selectedTeamIds: .constant(["team_mlb_bos", "team_mlb_nyy", "team_mlb_chc"])
|
|
)
|
|
.padding()
|
|
.themedBackground()
|
|
}
|