package com.pixelized.biblib.ui.screen.home.common.connectivity

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CloudOff
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pixelized.biblib.R
import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.utils.extention.bibLib

@Composable
fun ConnectivityHeader(
    modifier: Modifier = Modifier,
    isNetworkAvailable: () -> State<Boolean>
) {
    val showHideHeader by isNetworkAvailable()
    AnimatedVisibility(
        visible = showHideHeader.not(),
        enter = expandVertically(),
        exit = shrinkVertically(),
    ) {
        Row(
            modifier = modifier
                .background(color = MaterialTheme.colors.error)
                .fillMaxWidth()
                .sizeIn(minHeight = ButtonDefaults.MinHeight)
                .padding(
                    horizontal = MaterialTheme.bibLib.dimen.thumbnail.padding,
                    vertical = 8.dp,
                ),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Icon(
                modifier = Modifier.size(16.dp),
                imageVector = Icons.Default.CloudOff,
                tint = MaterialTheme.colors.onError,
                contentDescription = null
            )
            Text(
                modifier = Modifier.padding(start = 8.dp),
                style = MaterialTheme.typography.caption,
                color = MaterialTheme.colors.onError,
                text = stringResource(id = R.string.error_offline),
            )
        }
    }
}

@Composable
@Preview
private fun ConnectivityHeaderPreview() {
    BibLibTheme {
        val isNetworkAvailable = remember { mutableStateOf(false) }
        ConnectivityHeader(
            isNetworkAvailable = { isNetworkAvailable }
        )
    }
}