import SwiftUI

struct AttachmentContactsPickerView: View {
    @EnvironmentObject var store: AppStore
    @State private var selectedContact: Roster?

    var body: some View {
        VStack(spacing: 0) {
            // Contacts list
            let rosters = store.state.rostersState.rosters.filter { !$0.locallyDeleted }
            if !rosters.isEmpty {
                List {
                    ForEach(rosters) { roster in
                        ContactRow(roster: roster, selectedContact: $selectedContact)
                    }
                }
                .listStyle(.plain)
                .background(Color.Material.Background.light)
            } else {
                Spacer()
            }

            // Send panel
            Rectangle()
                .foregroundColor(.Material.Shape.black)
                .frame(maxWidth: .infinity)
                .frame(height: selectedContact == nil ? 0 : 50)
                .overlay {
                    HStack {
                        Text(L10n.Attachment.Send.contact)
                            .foregroundColor(.Material.Text.white)
                            .font(.body1)
                        Image(systemName: "arrow.up.circle")
                            .foregroundColor(.Material.Text.white)
                            .font(.body1)
                            .padding(.leading, 8)
                    }
                    .padding()
                }
                .clipped()
                .onTapGesture {
                    if let selectedContact = selectedContact {
                        store.dispatch(.sharingAction(.shareContact(jid: selectedContact.contactBareJid)))
                        store.dispatch(.sharingAction(.showSharing(false)))
                    }
                }
        }
    }
}

private struct ContactRow: View {
    var roster: Roster
    @Binding var selectedContact: Roster?

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 8) {
                ZStack {
                    Circle()
                        .frame(width: 44, height: 44)
                        .foregroundColor(.red)
                    Text(roster.name?.firstLetter ?? roster.contactBareJid.firstLetter)
                        .foregroundColor(.white)
                        .font(.body1)
                }
                Text(roster.contactBareJid)
                    .foregroundColor(Color.Material.Text.main)
                    .font(.body2)
                Spacer()
                if selectedContact == roster {
                    Image(systemName: "checkmark")
                        .foregroundColor(.Material.Text.main)
                        .font(.body1)
                        .padding(.trailing, 8)
                }
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 4)
            Rectangle()
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .foregroundColor(.Material.Background.dark)
        }
        .sharedListRow()
        .onTapGesture {
            selectedContact = roster
        }
    }
}