package com.iscs.bozzys.ui.pages.home

import android.content.Context
import android.content.Intent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.iscs.bozzys.ui.base.PageBase
import com.iscs.bozzys.ui.pages.vm.VMHome

/**
 * 打开主页面
 */
fun Context.openPageHome() {
    startActivity(Intent(this, PageHome::class.java))
}

/**
 * App主页面
 */
class PageHome : PageBase() {

    @Composable
    override fun GetViews(pv: PaddingValues) {
        Home(pv)
    }

    @Composable
    fun Home(pv: PaddingValues, vm: VMHome = viewModel()) {
        val state by vm.state.collectAsState()
        LaunchedEffect(Unit) { vm.init() }
        Scaffold(
            modifier = Modifier
                .fillMaxSize(),
            bottomBar = { CreateNavigationBar(pv, Color(0xFFFFFFFF), vm) }
        ) { ip ->
            Box(
                modifier = Modifier
                    .padding(PaddingValues(bottom = ip.calculateBottomPadding() - pv.calculateBottomPadding()))
                    .fillMaxSize()
            ) {
                vm.state.value.navs.forEach { nav ->
                    when (nav.id) {
                        0 -> HomeCompose(pv, if (state.navIndex == 0) 99f else 0f, vm)
                        1 -> JobsCompose(pv, if (state.navIndex == 1) 99f else 0f, vm)
                        2 -> MessageCompose(pv, if (state.navIndex == 2) 99f else 0f, vm)
                        3 -> MyCompose(pv, if (state.navIndex == 3) 99f else 0f)
                    }
                }

            }
        }
    }

    /**
     * 构建底部导航栏
     */
    @Composable
    fun CreateNavigationBar(pv: PaddingValues, bgColor: Color, vm: VMHome) {
        val state by vm.state.collectAsState()
        Column(modifier = Modifier.fillMaxWidth()) {
            HorizontalDivider(thickness = 1.dp, color = Color(0xFFEEEEEE))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(bgColor)
                    .padding(PaddingValues(bottom = pv.calculateBottomPadding()))
            ) {
                state.navs.forEach { nav ->
                    Box(
                        modifier = Modifier
                            .weight(1.0f)
                            .height(66.dp)
                            .clickable(
                                interactionSource = remember { MutableInteractionSource() },
                                indication = null,
                                onClick = { vm.updateNavIndex(nav.id) }),
                    ) {
                        Column(
                            verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally,
                            modifier = Modifier.align(Alignment.Center)
                        ) {
                            Icon(
                                painter = painterResource(nav.icon),
                                contentDescription = null,
                                modifier = Modifier.size(18.dp),
                                tint = if (state.navIndex == nav.id) nav.selectedColor else nav.unselectedColor
                            )
                            Text(
                                nav.title,
                                Modifier.padding(top = 5.dp),
                                fontSize = 12.sp,
                                lineHeight = 12.sp,
                                color = if (state.navIndex == nav.id) nav.selectedColor else nav.unselectedColor
                            )
                        }
                        if (nav.count > 0) Text(
                            "${nav.count}", color = Color.White, modifier = Modifier
                                .offset(x = 16.dp, y = 5.dp)
                                .defaultMinSize(14.dp, 14.dp)
                                .clip(RoundedCornerShape(14.dp))
                                .background(Color.Red)
                                .align(Alignment.TopCenter)
                                .padding(top = 1.dp)
                                .padding(horizontal = 2.dp),
                            textAlign = TextAlign.Center,
                            fontSize = 10.sp,
                            lineHeight = 10.sp
                        )
                    }
                }
            }
        }
    }

}
