import SwiftUI

struct SharedTabBar: View {
    @EnvironmentObject var store: AppStore
    var state: AppState { store.state }

    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .frame(maxWidth: .infinity)
                .frame(height: 0.2)
                .foregroundColor(.Main.separator)
            HStack(spacing: 0) {
                SharedTabBarButton(buttonFlow: .contacts)
                SharedTabBarButton(buttonFlow: .chats)
                SharedTabBarButton(buttonFlow: .settings)
            }
                .background(Color.Main.backgroundDark)
        }
    }
}

private struct SharedTabBarButton: View {
    @EnvironmentObject var store: AppStore
    private var state: AppState { store.state }

    let buttonFlow: AppFlow

    var body: some View {
        ZStack {
            VStack(spacing: 2) {
                buttonImg
                    .foregroundColor(buttonFlow == state.currentFlow ? .Tango.orangeMedium : .Main.gray)
                    .font(.system(size: 24, weight: .light))
                    .symbolRenderingMode(.hierarchical)
                Text(buttonTitle)
                    .font(.sub1)
                    .foregroundColor(buttonFlow == state.currentFlow ? .Main.black : .Main.gray)
            }
            Rectangle()
                .foregroundColor(.white.opacity(0.01))
                .onTapGesture {
                    store.dispatch(.changeFlow(buttonFlow))
                }
        }
    }

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

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

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

        default:
            return Image.init(systemName: "questionmark.circle")
        }
    }

    var buttonTitle: String {
        switch buttonFlow {
        case .contacts:
            return "Contacts"

        case .chats:
            return "Chats"

        case .settings:
            return "Settings"

        default:
            return "Unknown"
        }
    }
}
