element-x-ios/ElementX/Sources/Screens/Authentication/ServerSelectionScreen/View/ServerSelectionScreen.swift

//
// Copyright 2025 Element Creations Ltd.
// Copyright 2022-2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//

import Compound
import SwiftUI

struct ServerSelectionScreen: View {
    @Bindable var context: ServerSelectionScreenViewModel.Context
    
    private var backgroundColor: Color {
        switch context.viewState.mode {
        case .userInput: .compound.bgCanvasDefault
        case .picker: .compound.bgSubtleSecondaryLevel0
        }
    }
    
    private var headerIconStyle: BigIcon.Style {
        switch context.viewState.mode {
        case .userInput: .defaultSolid
        case .picker: .default
        }
    }
    
    var body: some View {
        FullscreenDialog(topPadding: 24) {
            VStack(spacing: 0) {
                header
                    .padding(.bottom, 36)
                
                serverForm
            }
            .readableFrame()
        } bottomContent: {
            continueButton
        }
        .background()
        .backgroundStyle(backgroundColor)
        .navigationBarTitleDisplayMode(.inline)
        .navigationTitle(context.viewState.screenTitle)
        .alert(item: $context.alertInfo)
        .introspect(.window, on: .supportedVersions) { window in
            context.send(viewAction: .updateWindow(window))
        }
    }
    
    /// The title, message and icon at the top of the screen.
    var header: some View {
        VStack(spacing: 8) {
            BigIcon(icon: \.userProfileSolid, style: headerIconStyle)
                .padding(.bottom, 8)
            
            Text(context.viewState.screenHeader)
                .font(.compound.headingMDBold)
                .multilineTextAlignment(.center)
                .foregroundColor(.compound.textPrimary)
        }
        .padding(.horizontal, 16)
    }
    
    /// The main input and confirm button.
    var serverForm: some View {
        VStack(alignment: .leading, spacing: 24) {
            switch context.viewState.mode {
            case .userInput:
                TextField(L10n.screenChangeServerTextfieldPlaceholder, text: $context.serverNameOrBaseURL, selection: $context.serverNameOrBaseURLSelection)
                    .textFieldStyle(.compound(labelText: Text(L10n.screenChangeServerTextfieldHeader),
                                              footerText: Text(context.viewState.footerMessage),
                                              state: context.viewState.isShowingFooterError ? .error : .default,
                                              accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
                    .keyboardType(.URL)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                    .introspect(.textField, on: .supportedVersions) {
                        context.send(viewAction: .updateTextField($0))
                    }
                    .onChange(of: context.serverNameOrBaseURL) { context.send(viewAction: .clearFooterError) }
                    .submitLabel(.done)
                    .onSubmit(submit)
            case .picker(let providers):
                FakeInlinePicker(items: providers,
                                 icon: \.host,
                                 selection: $context.serverNameOrBaseURL)
                    .accessibilityIdentifier(A11yIdentifiers.serverConfirmationScreen.serverPicker)
            }
        }
    }
    
    private var continueButton: some View {
        Button(action: submit) {
            Text(L10n.actionContinue)
        }
        .buttonStyle(.compound(.primary))
        .disabled(context.viewState.hasValidationError)
        .accessibilityIdentifier(A11yIdentifiers.changeServerScreen.continue)
    }
    
    /// Sends the `confirm` view action so long as the text field input is valid.
    func submit() {
        guard !context.viewState.hasValidationError else { return }
        context.send(viewAction: .confirm)
    }
}

// MARK: - Private

private struct FakeInlinePicker: View {
    let items: [String]
    let icon: KeyPath<CompoundIcons, Image>
    @Binding var selection: String
    
    var body: some View {
        VStack(spacing: 0) {
            ForEach(items, id: \.self) { item in
                ListRow(label: .default(title: item, icon: icon),
                        kind: .selection(isSelected: selection == item) {
                            selection = item
                        })
                        .accessibilityLabel(item)
                        .accessibilityIdentifier(item)
                        .overlay(alignment: .bottom) {
                            if item != items.last {
                                Divider()
                                    .hidden()
                                    .overlay(Color.compound._borderInteractiveSecondaryAlpha)
                                    .padding(.leading, 54)
                            }
                        }
            }
        }
        .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

// MARK: - Previews

@available(iOS 26.0, *)
struct ServerSelection_Previews: PreviewProvider, TestablePreview {
    static let matrixViewModel = makeViewModel(mode: .userInput, serverNameOrBaseURL: "matrix.org")
    static let emptyViewModel = makeViewModel(mode: .userInput, serverNameOrBaseURL: "")
    static let invalidViewModel = makeViewModel(mode: .userInput, serverNameOrBaseURL: "thisisbad")
    static let pickerViewModel = makeViewModel(mode: .picker(["matrix.org", "foo.bar", "baz.me"]), serverNameOrBaseURL: "foo.bar")
    
    static var previews: some View {
        ElementNavigationStack {
            ServerSelectionScreen(context: matrixViewModel.context)
        }
        .previewDisplayName("Matrix.org")
        
        ElementNavigationStack {
            ServerSelectionScreen(context: emptyViewModel.context)
        }
        .previewDisplayName("Empty")
        
        ElementNavigationStack {
            ServerSelectionScreen(context: invalidViewModel.context)
        }
        .snapshotPreferences(expect: invalidViewModel.context.observe(\.viewState.hasValidationError))
        .previewDisplayName("Error")
        
        ElementNavigationStack {
            ServerSelectionScreen(context: pickerViewModel.context)
        }
        .previewDisplayName("Picker")
    }
    
    static func makeViewModel(mode: ServerSelectionScreenMode = .userInput, serverNameOrBaseURL: String) -> ServerSelectionScreenViewModel {
        let authenticationService = AuthenticationService.mock
        
        let appSettings = AppSettings.volatile()
        
        let viewModel = ServerSelectionScreenViewModel(authenticationService: authenticationService,
                                                       mode: mode,
                                                       authenticationFlow: .login,
                                                       appSettings: appSettings,
                                                       homeserverHistoryManager: HomeserverHistoryManager(appSettings: appSettings),
                                                       userIndicatorController: UserIndicatorControllerMock())
        viewModel.context.serverNameOrBaseURL = serverNameOrBaseURL
        if case .userInput = mode, serverNameOrBaseURL == "thisisbad" {
            viewModel.context.send(viewAction: .confirm)
        }
        return viewModel
    }
}