import {View, Text, Image, StyleSheet, Button} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import DText from "../../components/DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import DTitle from "../../components/DTitle/DTitle";
import BasicButton from "../../components/BasicButton/BasicButton";
import Hyperlink from "../../components/Hyperlink/Hyperlink";
import React, {useState} from "react";

type ArticleTextProps = {
    article: number
}


function OrderScreen() {

    const [order, setOrder] = useState({
        article: 183658,
        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
        orderNumber: "93757290-0104-7",
        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
        supplierName: "simaland",
        marketplaceName: "Wildberries РЕНТА",
        sellerName: "DENCO",
        assembled: false
    });

    return (
        <View style={styles.container}>
            <View style={styles.dataContainer}>
                <View style={styles.imageWrapper}>
                    <Image source={{uri: order.imageUrl}} style={styles.image}/>
                </View>
                <View style={styles.contentContainer}>
                    <View style={styles.contentWrapper}>
                        <DTitle style={styles.contentTitle}>{order.orderNumber}</DTitle>
                        <Hyperlink url={`https://denco.store/manager/?a=resource/update&id=${order.article}`}>
                            <DText style={styles.articleText}>Артикул: {order.article}</DText>
                        </Hyperlink>
                        <DText>Товар: {order.productName}</DText>
                        <DText>Поставщик: {order.supplierName}</DText>
                        <DText>Селлер: {order.sellerName}</DText>
                        <DText>Маркетплейс: {order.marketplaceName}</DText>
                    </View>
                </View>
            </View>
            <View style={styles.buttonsContainer}>
                <View style={styles.buttonsWrapper}>
                    {!order.assembled &&
                        <BasicButton label={"Отметить как собранный"} onPress={() => {
                            setOrder({...order, assembled: true})
                            console.log(order);
                        }}/>
                    }

                    {order.assembled &&
                        <BasicButton label={"Печать этикетки"}/>
                    }
                    {/*<BasicButton label={"Следующий товар"}/>*/}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 30,
        width: "100%",
        height: "100%",
        overflow: "hidden",
        display: "flex",
        flex: 1,
    },
    dataContainer: {
        backgroundColor: "black",
        display: "flex",
        flexDirection: "row",
    },
    buttonsContainer: {
        backgroundColor: "blue",
        flex: 1,
        display: "flex",
        justifyContent: "center",
        paddingHorizontal: responsiveWidth(10)
    },
    buttonsWrapper: {
        backgroundColor: "red",
        rowGap: responsiveHeight(3)
    },
    imageWrapper: {
        width: responsiveWidth(40),
        // height: responsiveHeight(40),
        backgroundColor: "red",
        padding: RFPercentage(1)
    },
    image: {
        flex: 1,
        borderRadius: RFPercentage(3)
    },
    contentContainer: {
        padding: RFPercentage(1),
        backgroundColor: "pink",
        flex: 1

    },
    contentWrapper: {
        display: "flex",
        flexDirection: "column",
        gap: 0,
    },
    contentTitle: {
        alignSelf: "center"
    },
    articleText: {
        color: 'blue',
        textDecorationLine: 'underline'
    }
})
export default OrderScreen;