package com.example.wabi.view.screeens.onboard

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.motionEventSpy
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.example.wabi.ui.theme.WabiTheme
import com.example.wabi.view.components.buttons.ButtonLink
import com.example.wabi.view.components.buttons.MainButton
import com.example.wabi.view.screeens.onboard.items.OnboardListState
import com.example.wabi.view.screeens.onboard.items.OnboardStateIndicator
import com.example.wabi.view.screeens.onboard.items.PartSlider
import kotlinx.coroutines.launch

@Composable
fun Onboard(navHostController: NavHostController, vm: OnboardViewModel = hiltViewModel()) {

    val listStates = listOf(
        OnboardListState.First, OnboardListState.Second, OnboardListState.Third
    )

    val currentPageState = rememberPagerState(initialPage = 0) { listStates.size }

    val scope = rememberCoroutineScope()

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = WabiTheme.colors.onBoardDark)
            .verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.SpaceAround,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        HorizontalPager(
            state = currentPageState, modifier = Modifier
                .weight(0.8f)
                .fillMaxWidth()
        ) { state ->
            PartSlider(listStates[state], Modifier.fillMaxSize())
        }
        Column(
            modifier = Modifier
                .weight(0.3f)
                .fillMaxWidth(),
            verticalArrangement = Arrangement.SpaceAround,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            OnboardStateIndicator(
                pageSize = 3, currentPage = currentPageState.currentPage
            )
            Row(
                modifier = Modifier.fillMaxWidth()
            ) {
                MainButton(
                    onClick = {
                        scope.launch {
                            if (currentPageState.currentPage < listStates.size - 1) {
                                currentPageState.animateScrollToPage(currentPageState.currentPage + 1)
                            } else {
                                vm.closeOnboard(navHostController)
                            }
                        }
                    },
                    color = WabiTheme.colors.onBoardLight,
                    textContent = listStates[currentPageState.currentPage].buttonText,
                    colorContent = WabiTheme.colors.onBoardDark,
                    modifier = Modifier.padding(30.dp, 0.dp)
                )
            }
            ButtonLink(
                onClick = {
                    vm.closeOnboard(navHostController)
                },
                colorContent = WabiTheme.colors.onBoardLight,
                textContent = listStates[currentPageState.currentPage].linktext,
                enabled = listStates[currentPageState.currentPage].linktext.isNotEmpty()
            )
        }
    }
}