import SwiftUI

struct CreateRoomScreen: View {
    @EnvironmentObject var store: AppStore
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        ZStack {
            // Background color
            Color.Material.Background.light
                .ignoresSafeArea()

            // Content
            VStack(spacing: 0) {
                // Header
                CreateRoomScreenHeader(presentationMode: presentationMode)

                // List with buttons
                List {
                    CreateRoomRowButton(title: "Create group chat", image: "person.2.square.stack") {
                        print("Create chat")
                    }
                    CreateRoomRowButton(title: "Find public chats", image: "magnifyingglass") {
                        print("Create group chat")
                    }
                }
                .listStyle(.plain)
                .background(Color.Material.Background.light)

                // Tab bar
                Spacer()
            }
        }
    }
}

private struct CreateRoomScreenHeader: View {
    @Binding var presentationMode: PresentationMode

    var body: some View {
        ZStack {
            // bg
            Color.Material.Background.dark
                .ignoresSafeArea()

            HStack(spacing: 0) {
                Image(systemName: "xmark")
                    .foregroundColor(.Material.Elements.active)
                    .padding(.trailing, 16)
                    .tappablePadding(.symmetric(12)) {
                        presentationMode.dismiss()
                    }
                Spacer()
            }

            // title
            Text("New conversation")
                .font(.head2)
                .foregroundColor(Color.Material.Text.main)
        }
    }
}

private struct CreateRoomRowButton: View {
    var title: String
    var image: String
    var action: () -> Void

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: image)
                .foregroundColor(.Material.Elements.active)
            Text(title)
                .font(.body)
                .foregroundColor(.Material.Text.main)
            Spacer()
        }
        .sharedListRow()
        .onTapGesture {
            action()
        }
    }
}