fun ProductRow(
    productWrapper: ProdottoWrapper,
    onUmChanged: (Um) -> Unit,
    onAdd: () -> Unit,
    onRemove: () -> Unit,
    onEditQuantity: (String) -> Unit,
    onFocusRemoved: () -> Unit
) {

    val product = productWrapper.prodotto
    val um = productWrapper.um
    val price = productWrapper.prezzo
    val quantity by remember(productWrapper.quantita) {
        derivedStateOf {
            productWrapper.quantita
        }
    }
    var dropdownVisibility by remember { mutableStateOf(false) }
    var dropdownWidth by remember { mutableStateOf(Size.Zero) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .drawBehind {
                drawRect(Color.White)
            },
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(3f)
        ) {
            Text(
                text = "Cod. ${product.codice}",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Visible
            )
            Text(
                text = product.descrizione,
                maxLines = 4,
                overflow = TextOverflow.Ellipsis
            )
            Text(
                text = "Prezzo unitario ${BuildConfig.VALUTA} ${
                    Formatter.formatPrezzo(
                        LocalContext.current, productWrapper.prezzo_unitario
                    )
                }/${product.um_default.descrizione}",
                fontSize = 12.sp,
                fontWeight = FontWeight.Medium,
                color = colorResource(id = R.color.os_dark_grey),
                maxLines = 1,
                overflow = TextOverflow.Visible
            )
        }
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f)
                .onGloballyPositioned { layoutCoordinates ->
                    dropdownWidth = layoutCoordinates.size.toSize()
                },
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            if (product.um.size > 1) {
                Card(
                    backgroundColor = Color.Transparent,
                    border = BorderStroke(1.dp, colorResource(id = R.color.medium_dark)),
                    elevation = 0.dp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                        .clickable { dropdownVisibility = true },
                ) {
                    Row(
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(all = 5.dp)
                    ) {
                        Text(text = um.descrizione)
                        Icon(
                            imageVector = Icons.Default.KeyboardArrowDown,
                            contentDescription = ""
                        )
                    }
                }
                DropdownMenu(
                    expanded = dropdownVisibility,
                    onDismissRequest = { dropdownVisibility = false },
                    modifier = Modifier.widthIn(min = with(LocalDensity.current) { dropdownWidth.width.toDp() })
                ) {
                    product.um.forEach {
                        Row(modifier = Modifier
                            .clickable {
                                onUmChanged(it)
                                dropdownVisibility = false
                            }
                            .fillMaxWidth()
                            .padding(horizontal = 10.dp, vertical = 5.dp)) {
                            Text(text = it.descrizione, overflow = TextOverflow.Ellipsis)
                        }
                    }
                }
            } else {
                Text(text = um.descrizione, fontWeight = FontWeight.Bold)
            }

        }
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(2f)
                .padding(horizontal = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            QuantitySelector(
                quantity = quantity,
                onAdd =  onAdd,
                onRemove = onRemove,
                onEditQuantity = {
                    onEditQuantity(it)
                },
                onFocusRemoved = onFocusRemoved
            )
        }
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "${BuildConfig.VALUTA} ${
                    Formatter.formatPrezzo(
                        LocalContext.current,
                        price
                    )
                }",
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.End
            )
        }
    }
}

fun QuantitySelector(
    quantity: String,
    onAdd: () -> Unit,
    onRemove: () -> Unit,
    onEditQuantity: (String) -> Unit,
    onFocusRemoved: () -> Unit
) {

    val interactionSource = remember { MutableInteractionSource() }
    val focused = remember { mutableStateOf(false) }
    val focusManager = LocalFocusManager.current

    Card(
        backgroundColor = Color.Transparent,
        border = BorderStroke(1.dp, colorResource(id = R.color.medium_dark)),
        elevation = 0.dp,
        modifier = Modifier
            .wrapContentWidth()
            .height(40.dp)
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            IconButton(onClick = onRemove, modifier = Modifier.weight(1f)) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_baseline_remove_24),
                    contentDescription = null,
                    tint = colorResource(id = R.color.os_dark_grey),
                    modifier = Modifier.fillMaxSize(0.7f)
                )
            }
            BasicTextField(
                value = quantity,
                onValueChange = {
                    onEditQuantity(it)
                },
                textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
                singleLine = true,
                interactionSource = interactionSource,
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(onDone = {
                    onFocusRemoved()
                    focusManager.clearFocus()
                }),
                modifier = Modifier
                    .weight(2f)
                    .fillMaxWidth()
                    .onFocusChanged {
                        if (!it.isFocused && focused.value) {
                            onFocusRemoved()
                        }
                        focused.value = it.isFocused
                    }
            ) {
                TextFieldDefaults.TextFieldDecorationBox(
                    value = quantity,
                    innerTextField = it,
                    enabled = true,
                    singleLine = true,
                    visualTransformation = VisualTransformation.None,
                    interactionSource = interactionSource,
                    contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                        top = 0.dp,
                        bottom = 0.dp,
                        start = 0.dp,
                        end = 0.dp
                    )
                )
            }
            IconButton(onClick = onAdd, modifier = Modifier.weight(1f)) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = null,
                    tint = colorResource(id = R.color.os_dark_grey),
                    modifier = Modifier.fillMaxSize(0.7f)
                )
            }
        }
    }
}