import SwiftUI

struct CreateConversationMainScreen: View {
    @EnvironmentObject var store: AppStore

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

            // Content
            VStack(spacing: 0) {
                // Header
                CreateConversationHeader()

                // Chats list
                // if !store.state.chatsState.chats.isEmpty {
                //     List {
                //         ForEach(store.state.chatsState.chats) { chat in
                //             ChatsRow(chat: chat)
                //         }
                //     }
                //     .listStyle(.plain)
                //     .background(Color.Material.Background.light)
                // } else {
                //     Spacer()
                // }
                //
                // // Tab bar
                // SharedTabBar()
            }
        }
    }
}

private struct CreateConversationHeader: View {
    @EnvironmentObject var store: AppStore

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

            HStack(spacing: 0) {
                Image(systemName: "arrow.left")
                    .foregroundColor(.Material.Elements.active)
                    .padding(.leading, 16)
                    .tappablePadding(.symmetric(12)) {
                        store.dispatch(.changeFlow(store.state.previousFlow))
                    }
                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()
        }
    }
}