import SwiftUI

struct ChatsListScreen: View {
    @EnvironmentObject var store: AppStore

    @State private var isShowingAddScreen = false

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

            // Content
            VStack(spacing: 0) {
                // Header
                ChatsScreenHeader(isShowingAddScreen: $isShowingAddScreen)

                // 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()
            }
        }
        .sheet(isPresented: $isShowingAddScreen) {
            CreateRoomScreen()
                .transition(.move(edge: .bottom))
        }
    }
}

private struct ChatsScreenHeader: View {
    @Binding var isShowingAddScreen: Bool

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

            // title
            Text(L10n.Chats.title)
                .font(.head2)
                .foregroundColor(Color.Material.Text.main)

            HStack {
                Spacer()
                Image(systemName: "square.and.pencil")
                    .foregroundColor(.Material.Elements.active)
                    .tappablePadding(.symmetric(12)) {
                        isShowingAddScreen = true
                    }
            }
            .padding(.horizontal, 16)
        }
        .frame(height: 44)
    }
}

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

    var chat: Chat

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 8) {
                ZStack {
                    Circle()
                        .frame(width: 44, height: 44)
                        .foregroundColor(.red)
                    Text(chat.participant.firstLetter)
                        .foregroundColor(.white)
                        .font(.body1)
                }
                Text(chat.participant)
                    .foregroundColor(Color.Material.Text.main)
                    .font(.body2)
                Spacer()
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 4)
            Rectangle()
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .foregroundColor(.Material.Background.dark)
        }
        .sharedListRow()
        .onTapGesture {
            store.dispatch(.chatsAction(.startChat(accountJid: chat.account, participantJid: chat.participant)))
        }
    }
}