letro-ios/ElementX/Sources/Screens/CreateRoom/View/CreateRoomScreen.swift

//
// Copyright 2022 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

import SwiftUI

struct CreateRoomScreen: View {
    @ObservedObject var context: CreateRoomViewModel.Context
    
    var body: some View {
        mainContent
            .scrollContentBackground(.hidden)
            .background(Color.element.formBackground.ignoresSafeArea())
            .navigationTitle(L10n.screenCreateRoomTitle)
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    createButton
                }
            }
    }
    
    /// The main content of the view to be shown in a scroll view.
    var mainContent: some View {
        Form {
            roomSection
            topicSection
            selectedUsersSection
            // TODO: Spacer not working properly
            Spacer()
                .listRowBackground(Color.clear)
            securitySection
        }
    }
    
    @ScaledMetric private var roomIconSide: CGFloat = 64
    private var roomSection: some View {
        Section {
            HStack(alignment: .center, spacing: 16) {
                Image(systemName: "camera")
                    .foregroundColor(.element.secondaryContent)
                    .frame(width: roomIconSide, height: roomIconSide)
                    .background(Color.element.quinaryContent)
                    .clipShape(Circle())
                VStack(alignment: .leading, spacing: 8) {
                    Text(L10n.screenCreateRoomRoomNameLabel.uppercased())
                        .formSectionHeader()
                    TextField(L10n.screenCreateRoomRoomNameLabel,
                              text: $context.roomName,
                              prompt: Text(L10n.screenCreateRoomRoomNamePlaceholder),
                              axis: .horizontal)
                        .padding(FormRow.insets)
                        .background(Color.element.formRowBackground)
                        .clipShape(RoundedRectangle(cornerRadius: 8))
                }
            }
            .listRowBackground(Color.clear)
        }
        .formSectionStyle()
    }
    
    private var topicSection: some View {
        Section {
            TextField(L10n.screenCreateRoomTopicLabel,
                      text: $context.roomTopic,
                      prompt: Text(L10n.screenCreateRoomTopicPlaceholder),
                      axis: .vertical)
                .lineLimit(3, reservesSpace: false)
        } header: {
            Text(L10n.screenCreateRoomTopicLabel)
        }
        .formSectionStyle()
    }
    
    @ScaledMetric private var cellWidth: CGFloat = 64
    private var selectedUsersSection: some View {
        Section {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 28) {
                    ForEach(context.viewState.selectedUsers, id: \.userID) { user in
                        InviteUsersScreenSelectedItem(user: user, imageProvider: context.imageProvider) {
                            deselect(user)
                        }
                        .frame(width: cellWidth)
                    }
                }
            }
            .listRowBackground(Color.clear)
        }
    }
    
    private var securitySection: some View {
        Section {
            Button(action: selectPrivate) {
                VStack(alignment: .listRowSeparatorLeading, spacing: 0) {
                    Label(L10n.screenCreateRoomPrivateOptionTitle, systemImage: "lock.shield")
                    Text(L10n.screenCreateRoomPrivateOptionDescription)
                        .font(.compound.bodyMD)
                        // TODO: padding not working properly
                        .padding(.horizontal, 20)
                        .foregroundColor(.element.secondaryContent)
                }
            }
            .buttonStyle(FormButtonStyle(iconAlignment: .top, accessory: .singleSelection(isSelected: context.isRoomPrivate)))
            Button(action: selectPublic) {
                VStack(alignment: .listRowSeparatorLeading, spacing: 0) {
                    Label(L10n.screenCreateRoomPublicOptionTitle, systemImage: "exclamationmark.shield")
                    Text(L10n.screenCreateRoomPublicOptionDescription)
                        .font(.compound.bodyMD)
                        .padding(.horizontal)
                        .foregroundColor(.element.secondaryContent)
                }
            }
            .buttonStyle(FormButtonStyle(iconAlignment: .top, accessory: .singleSelection(isSelected: !context.isRoomPrivate)))
        } header: {
            Text(L10n.commonSecurity.uppercased())
        }
        .formSectionStyle()
    }
    
    private var createButton: some View {
        Button { context.send(viewAction: .createRoom) } label: {
            Text(L10n.actionCreate)
        }
        .disabled(!context.viewState.canCreateRoom)
    }
    
    private func selectPrivate() {
        context.send(viewAction: .selectPrivateRoom)
    }
    
    private func selectPublic() {
        context.send(viewAction: .selectPublicRoom)
    }
    
    private func deselect(_ user: UserProfile) {
        context.send(viewAction: .deselectUser(user))
    }
}

// MARK: - Previews

struct CreateRoom_Previews: PreviewProvider {
    static let viewModel = {
        let userSession = MockUserSession(clientProxy: MockClientProxy(userID: "@userid:example.com"),
                                          mediaProvider: MockMediaProvider())
        let parameters = CreateRoomVolatileParameters()
        parameters.selectedUsers = [.mockAlice, .mockBob, .mockCharlie]
        return CreateRoomViewModel(userSession: userSession, createRoomParameters: parameters)
    }()
    
    static var previews: some View {
        NavigationView {
            CreateRoomScreen(context: viewModel.context)
        }
    }
}