import Foundation
import SwiftfulRouting
import SwiftUI

private enum Tab {
    case conversations
    case contacts
    case settings
}

struct MainTabScreen: View {
    @EnvironmentObject var clientsStore: ClientsStore

    @State private var selectedTab: Tab = .conversations

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

            // Content
            VStack(spacing: 0) {
                switch selectedTab {
                case .conversations:
                    Color.red
                    // ConversationsScreen()

                case .contacts:
                    RouterView { _ in
                        ContactsScreen()
                    }

                case .settings:
                    Color.green
                    // SettingsScreen()
                }

                // Tab bar
                TabBar(selectedTab: $selectedTab)
            }
        }
        .onLoad {
            clientsStore.reconnectAll()
        }
    }
}

private struct TabBar: View {
    @Binding var selectedTab: Tab

    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .frame(maxWidth: .infinity)
                .frame(height: 0.2)
                .foregroundColor(.Material.Shape.separator)
            HStack(spacing: 0) {
                TabBarButton(buttonType: .contacts, selectedTab: $selectedTab)
                TabBarButton(buttonType: .conversations, selectedTab: $selectedTab)
                TabBarButton(buttonType: .settings, selectedTab: $selectedTab)
            }
            .background(Color.Material.Background.dark)
        }
        .frame(height: 50)
    }
}

private struct TabBarButton: View {
    let buttonType: Tab

    @Binding var selectedTab: Tab

    var body: some View {
        ZStack {
            VStack(spacing: 2) {
                buttonImg
                    .foregroundColor(buttonType == selectedTab ? .Material.Elements.active : .Material.Elements.inactive)
                    .font(.system(size: 24, weight: .light))
                    .symbolRenderingMode(.hierarchical)
                Text(buttonTitle)
                    .font(.sub1)
                    .foregroundColor(buttonType == selectedTab ? .Material.Text.main : .Material.Elements.inactive)
            }
            Rectangle()
                .foregroundColor(.white.opacity(0.01))
                .onTapGesture {
                    selectedTab = buttonType
                }
        }
    }

    var buttonImg: Image {
        switch buttonType {
        case .contacts:
            return Image(systemName: "person.2.fill")

        case .conversations:
            return Image(systemName: "bubble.left.fill")

        case .settings:
            return Image(systemName: "gearshape.fill")
        }
    }

    var buttonTitle: String {
        switch buttonType {
        case .contacts:
            return L10n.Tabs.Name.contacts

        case .conversations:
            return L10n.Tabs.Name.conversations

        case .settings:
            return L10n.Tabs.Name.settings
        }
    }
}