//
//  BottomTabView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/09.
//

import SwiftUI

struct BottomTabView: View {
    let width: CGFloat
    @Binding var currentTab: HomeViewModel.CurrentTab
    
    var body: some View {
        HStack(spacing: 0) {
            let tabWidth = width / 5
            
            TabButton(
                title: "콘텐츠",
                action: {
                    if currentTab != .content {
                        currentTab = .content
                    }
                },
                image: {
                    currentTab == .content ?
                    "ic_tabbar_content_selected" :
                    "ic_tabbar_content_normal"
                },
                fontName: {
                    currentTab == .content ?
                    Font.bold.rawValue :
                    Font.medium.rawValue
                },
                color: {
                    currentTab == .content ?
                    Color(hex: "3bb9f1") :
                    Color(hex: "bbbbbb")
                },
                width: tabWidth
            )
            
            TabButton(
                title: "라이브",
                action: {
                    if currentTab != .live {
                        currentTab = .live
                    }
                },
                image: {
                    currentTab == .live ?
                    "ic_tabbar_live_selected" :
                    "ic_tabbar_live_normal"
                },
                fontName: {
                    currentTab == .live ?
                    Font.bold.rawValue :
                    Font.medium.rawValue
                },
                color: {
                    currentTab == .live ?
                    Color(hex: "3bb9f1") :
                    Color(hex: "bbbbbb")
                },
                width: tabWidth
            )
            
            TabButton(
                title: "탐색",
                action: {
                    if currentTab != .explorer {
                        currentTab = .explorer
                    }
                },
                image: {
                    currentTab == .explorer ?
                    "ic_tabbar_explorer_selected" :
                    "ic_tabbar_explorer_normal"
                },
                fontName: {
                    currentTab == .explorer ?
                    Font.bold.rawValue :
                    Font.medium.rawValue
                },
                color: {
                    currentTab == .explorer ?
                    Color(hex: "3bb9f1") :
                    Color(hex: "bbbbbb")
                },
                width: tabWidth
            )
            
            TabButton(
                title: "메시지",
                action: {
                    if currentTab != .message {
                        currentTab = .message
                    }
                },
                image: {
                    currentTab == .message ?
                    "ic_tabbar_message_selected" :
                    "ic_tabbar_message_normal"
                },
                fontName: {
                    currentTab == .message ?
                    Font.bold.rawValue :
                    Font.medium.rawValue
                },
                color: {
                    currentTab == .message ?
                    Color(hex: "3bb9f1") :
                    Color(hex: "bbbbbb")
                },
                width: tabWidth
            )
            
            TabButton(
                title: "마이",
                action: {
                    if currentTab != .mypage {
                        currentTab = .mypage
                    }
                },
                image: {
                    currentTab == .mypage ?
                    "ic_tabbar_my_selected" :
                    "ic_tabbar_my_normal"
                },
                fontName: {
                    currentTab == .mypage ?
                    Font.bold.rawValue :
                    Font.medium.rawValue
                },
                color: {
                    currentTab == .mypage ?
                    Color(hex: "3bb9f1") :
                    Color(hex: "bbbbbb")
                },
                width: tabWidth
            )
        }
        .background(Color(hex: "111111"))
    }
}

struct BottomTabView_Previews: PreviewProvider {
    static var previews: some View {
        BottomTabView(
            width: UIScreen.main.bounds.width,
            currentTab: .constant(.live)
        )
    }
}
