import { MaterialIcons } from "@expo/vector-icons";
import { shareAsync } from "expo-sharing";
import React, { useEffect, useRef, useState } from "react";
import { Dimensions, Image, Platform, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
import { Dialog, Button, IconButton, Portal, Surface, Text, Card, Divider, DataTable, TouchableRipple, Avatar, Colors, TextInput, HelperText } from "react-native-paper";
import StepIndicator from 'react-native-step-indicator';
import { useDispatch, useSelector } from "react-redux";
import { getAllOrdersAction, getOrderdetailAction, getOrdertrackAction, OrderInvoiceAction, OrderStatusUpdateAction } from "../../state/actions/orderDetailsAction";
import { getAllUserReviewAction } from "../../state/actions/ordersAction";
import isEmpty from "../../state/validations/is-empty";
import * as Print from "expo-print";
import RenderHTML, { RenderHTMLSource } from "react-native-render-html";
import sample from '../../assets/images/img/logo/logo.png';
import Header from "../header";
import { createDelReviewRatingsAction, getAllDelReviewRatingsAction } from "../../state/actions/deliveryreviewratingsAction";
import { Rating } from "react-native-ratings";
import Modal from "react-native-modal";
import { useToast } from 'react-native-paper-toast';
// import { Document, Page } from "@react-pdf/renderer";

export default function myOrderDetails(props) {
    const { navigation } = props;
    const orderId = props?.route?.params;
    const dispatch = useDispatch();
    const orders = props?.route?.params?.order;
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    const [data, setData] = React.useState();
    const [Id, setDataa] = useState()
    const [ordersList, setOrdersList] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const EmailID = useSelector(state => state.auth.user?.Email_Id)
    const [invoiceDetails, setDetails] = useState();
    const [invoiceDetailsLoading, setInvoiceDetailsLoading] = useState(false);
    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
    const toast = useToast();

    let alldetails = useSelector((state) => state.orderDetail.Orderdetails.all);
    
    let allorders = useSelector((state) => state.orderDetail.Orders.all);
    let alltracking = useSelector((state) => state.orderDetail.Ordertrack.all);
    let Orders = []
    if (allorders) {
        for (let i = 0; i < allorders.length; i++) {
            let data = allorders[i].Item_Data.Item_Master_Data
            for (let j = 0; j < data.length; j++) {
                Orders.push({
                    Order_Id: allorders[i].Order_Id,
                    Order_Status: data[j].Order_Status,
                    Order_Date: data[j].Order_Date,
                    Price: data[j].Price,
                    Payment_Status: data[j].Payment_Status,
                    Product_Id: data[j].Product_Id,
                    Product_Image: data[j].Product_Image,
                    Product_Name: data[j].Product_Name,
                    User_Email_Id: data[j].User_Email_Id,
                    User_Address_Id: data[j].User_Address_Id,
                    Item_Master_Id: data[j].Item_Master_Id,
                    Is_Return_Flag: data[j].Is_Return_Flag,
                    Partner_Name: data[j].Partner_Name,
                    Net_Price: data[j].Net_Price
                }
                )
            }
        }
    }
    const handleClick = async (data) => {
        // navigation.navigate('ProductDetails', {  Product_Id: data.Product_Id})
    };

    const updateStates = (data, loading) => {
        setOrdersList(data);
        setLoading(loading);
    };

    const [visible, setVisible] = React.useState(false);
    const hideDialog = () => setVisible(false);
    const [visibleone, setVisibleOne] = React.useState(false);
    const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
    const [issubmitted, setSubmit] = React.useState(false);
    useEffect(() => {
        let formData1 = {
            Order_Id: orders.Order_Id,
            Order_Status: "",
            Records_Filter: "FILTER",
            User_Email_Id: "",
        }
        let formData2 = {
            Records_Filter: "FILTER",
            User_Address_Id: orders?.User_Address_Id
        }
        dispatch(getOrderdetailAction(formData2));
        dispatch(getAllOrdersAction(formData1));
    }, []);

    const cancelhandleClick = (data) => {
        let updateData = {
            Item_Master_Id: data.Item_Master_Id,
            Order_Id: data.Order_Id,
            Modified_By: data.User_Email_Id,
            Status: "CANCELLED",
        }
        dispatch(OrderStatusUpdateAction(updateData, data, navigation, setSubmit))
        setVisible(!visible)
    };

    const returnhandleClicks = (data) => {
        let updateData = {
            Item_Master_Id: data.Item_Master_Id,
            Order_Id: data.Order_Id,
            Modified_By: data.User_Email_Id,
            Status: "RETURN",
        }
        dispatch(OrderStatusUpdateAction(updateData, data, navigation, setSubmit))
        setVisibleOne(!visibleone)
    };

    const orderlabels = ["Ordered", "Packed", "Shipped", "Delivered"];
    const cancellabels = ["Ordered","Cancelled"];
    const returnlabels = ["Delivered", "Returned"];

    const customStyles = {
        stepIndicatorSize: 25,
        currentStepIndicatorSize: 30,
        separatorStrokeWidth: 2,
        currentStepStrokeWidth: 3,
        stepStrokeCurrentColor: 'green',
        stepStrokeWidth: 3,
        stepStrokeFinishedColor: 'green',
        stepStrokeUnFinishedColor: '#aaaaaa',
        separatorFinishedColor: 'green',
        separatorUnFinishedColor: '#aaaaaa',
        stepIndicatorFinishedColor: 'green',
        stepIndicatorUnFinishedColor: '#ffffff',
        stepIndicatorCurrentColor: '#ffffff',
        stepIndicatorLabelFontSize: 13,
        currentStepIndicatorLabelFontSize: 13,
        stepIndicatorLabelCurrentColor: '#fe7013',
        stepIndicatorLabelFinishedColor: '#ffffff',
        stepIndicatorLabelUnFinishedColor: '#aaaaaa',
        labelColor: '#999999',
        labelSize: 13,
        currentStepLabelColor: 'green'
    }
    const cancelStyles = {
        stepIndicatorSize: 25,
        currentStepIndicatorSize: 30,
        separatorStrokeWidth: 2,
        currentStepStrokeWidth: 3,
        stepStrokeCurrentColor: '#fe7013',
        stepStrokeWidth: 3,
        stepStrokeFinishedColor: 'red',
        stepStrokeUnFinishedColor: '#aaaaaa',
        separatorFinishedColor: 'red',
        separatorUnFinishedColor: '#aaaaaa',
        stepIndicatorFinishedColor: 'red',
        stepIndicatorUnFinishedColor: '#ffffff',
        stepIndicatorCurrentColor: '#ffffff',
        stepIndicatorLabelFontSize: 13,
        currentStepIndicatorLabelFontSize: 13,
        stepIndicatorLabelCurrentColor: '#fe7013',
        stepIndicatorLabelFinishedColor: '#ffffff',
        stepIndicatorLabelUnFinishedColor: '#aaaaaa',
        labelColor: '#999999',
        labelSize: 13,
        currentStepLabelColor: 'red'
    }

    //For Invoice 

    const [selectedPrinter, setSelectedPrinter] = React.useState();

    const print = async () => {
        // On iOS/android prints the given html. On web prints the HTML from the current page.
        await Print.printAsync({
            html,
            printerUrl: selectedPrinter?.url, // iOS onlys
        });
    }

    const updateStatesInvoice = (status, data) => {
        setInvoiceDetailsLoading(false);
        if (status) {
            if (!invoiceDetails) {
                setDetails(data);
            }
        }
    };
    useEffect(() => {

        if (isEmpty(Orders) || Id !== orderId.id) {
            let formData1 = {
                Order_Id: orderId.id,
                Order_Status: "",
                Records_Filter: "FILTER",
                User_Email_Id: "",
            }
            setDataa(orderId.id)
            dispatch(getAllOrdersAction(updateStates, formData1));
        }
        // if (isEmpty(alltracking) || Id !== orderId.id) {
        //     let formData11 = {
        //         Order_Id: orderId.id,
        //     }
        //     setDataa(orderId.id)
        //     dispatch(getOrdertrackAction(formData11));
        // }
        if ((Orders && isEmpty(alldetails)) || Id !== orderId.id) {
            let formData2 = {
                Records_Filter: "FILTER",
                User_Address_Id: Orders[0]?.User_Address_Id
            }
            let formData = {
                Records_Filter: "FILTER",
                Email_Id: EmailID,
                Product_Id: Orders[0]?.Product_Id,
            }
            let formDataInvoice = {
                "Item_Master_Id": Orders[0]?.Item_Master_Id,
                "Order_Id": Orders[0]?.Order_Id
            }
            if (!invoiceDetails && !invoiceDetailsLoading) {
                setInvoiceDetailsLoading(true);
                dispatch(OrderInvoiceAction(formDataInvoice, updateStatesInvoice));
            }
            let formDatavalue = {
                Order_Id: Orders[0]?.Order_Id
            }
            dispatch(getOrderdetailAction(formData2));
            dispatch(getAllUserReviewAction(formData));
            dispatch(getOrdertrackAction(formDatavalue));
        }
    }, []);

    const getInvoice = () => {
        return `

                <html>
                <head>
            <style>
            .grid-container {
            display: grid;
            grid-template-columns: auto auto;
            }.hr.solid {
            border-top: 5px solid #2EE1F4;
            }
            table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }
            td{
            border: 1px solid #2EE1F4;
            text-align: right;
            padding: 8px;
            }
            th {
            border: 1px solid #2EE1F4;
            text-align: right;
            background-color: #2EE1F4;
            padding: 8px;
            }
            </style>
            
                    <meta charset="utf-8">
                    <title>Invoice</title>
                    <script src="script.js"></script>
                </head>
                <body>
                    <header>
                <center>
                        <h1 style="color:#2EE1F4;">Invoice</h1>
                </center>
                        <address contenteditable>
                <div class="grid-container">
                <img src="../../assets/images/img/logo/logo.png" width="100" height="80">
                <span style="text-align:right">
                <p>Order Id: `+ invoiceDetails.OrderId + `</p>
                <p>Order Date: `+ invoiceDetails.OrderDate + `</p>
                <p>Invoice No: `+ invoiceDetails.InvoiceNo + `</p>
                <p>Invoice Date:`+ invoiceDetails.InvoiceDate + `</p>
                </span>
                </div>
                <hr class="solid">
                <div class="grid-container">
                <span>
                <h4>Billing Address:</h4>
                <p>`+ invoiceDetails.BillingAddress.Name + `</p>
                <p>`+ invoiceDetails.BillingAddress.AddressDrToSt + `</p>
                <p>`+ invoiceDetails.BillingAddress.City + `,` + invoiceDetails.BillingAddress.State + `,` + invoiceDetails.BillingAddress.Country + `</p>
                <p>+`+ invoiceDetails.BillingAddress.PhoneNumber + `</p>
                <p>`+ invoiceDetails.BillingAddress.email + `</p>
                </span>
                <span style="text-align:right">
                <h4>Shipping Address:</h4>
                <p>`+ invoiceDetails.ShippingAddress.Name + `</p>
                <p>`+ invoiceDetails.ShippingAddress.AddressDrToSt + `</p>
                <p>`+ invoiceDetails.ShippingAddress.City + `,` + invoiceDetails.ShippingAddress.State + `,` + invoiceDetails.ShippingAddress.Country + `</p>
                <p>+`+ invoiceDetails.ShippingAddress.PhoneNumber + `</p>
                <p>`+ invoiceDetails.ShippingAddress.email + `</p>
                </span>
                </div>
                <hr class="solid">
                <div class="grid-container">
                <span>
                <h4>Sold By:</h4>
                <p>`+ invoiceDetails.Partner.Name + `</p>
                <p>`+ invoiceDetails.Partner.AddressDrToSt + `</p>
                <p>`+ invoiceDetails.Partner.City + `,` + invoiceDetails.Partner.State + `,` + invoiceDetails.Partner.Country + `</p>
                <p>`+ invoiceDetails.Partner.Name + `</p>
                </span>
                <span style="text-align:right">
                <p>PAN NO: `+ invoiceDetails.Partner.Pan + `</p>
                <p>GST: `+ invoiceDetails.Partner.GST + `</p>
                </span>
                </div>
                <hr class="solid">
                <table>
            <tr>
                <th>SI No</th>
                <th style="width:70%">Description</th>
                <th>rate</th>
                <th>QTY</th>
                <th>Amount</th> 
                <th>IGST</th>
                <th>IGST Amount</th>
            </tr>

            <tr> 
                <td>1</td>
                <td>`+ invoiceDetails.product.name + `</td>
                <td>`+ invoiceDetails.product.Amount + `</td>
                <td>`+ invoiceDetails.product.Qty + `</td>
                <td>`+ invoiceDetails.product.GrandTotal + `</td>
                <td>`+ invoiceDetails.product.IGST + `</td>
                <td>`+ invoiceDetails.product.IGSTAmount + `</td>
            </tr>
            
            <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
           
            </table>
                        </address>
                        </header>
                    <aside>
                        <div contenteditable>
                            <p>Note: This is computer generated Invoice and signature is not required.</p>
                        </div>
                    </aside>
                </body>
            </html>
`;
    }


    const [invoiceMobile, setinvoiceMobile] = useState(false)

    const printToFile = async () => {
        if (Platform.OS == 'web') {
            setinvoiceMobile(true)

        }
        else {
            const html = getInvoice();
            try {
                const { uri } = await Print.printToFileAsync({ html });
                
                await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
            } catch (error) {
            }
        }

        // On iOS/android prints the given html. On web prints the HTML from the current page.

    }
    const printToFileWeb = async () => {

        try {
            const { uri } = await Print.printToFileAsync({ html });
            await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' })
                .finally((data) => {
                    setinvoiceMobile(false)
                }
                )

        } catch (error) {
        }


    }
    const selectPrinter = async () => {
        const printer = await Print.selectPrinterAsync(); // iOS only
        setSelectedPrinter(printer);
    }

    //API
    let alldelireviewsandratings = useSelector(state => state.delreviewrating?.delreviewratings?.all);
    console.log(alldelireviewsandratings)

    //delivery person reviews and ratings API call
    useEffect(() => {
        let formData = {
            "Records_Filter": "FILTER",
            "User_Email_ID": EmailID
        }
        dispatch(getAllDelReviewRatingsAction(formData));
    }, []);

    const Alldelireviewsandratings = () => {
        let existcomment;
        let UserData = [];
        if (alldelireviewsandratings[0]) {
            existcomment = alldelireviewsandratings?.filter(review => review.User_Email_Id === user?.Email_Id).length
            UserData = alldelireviewsandratings?.filter(review => review.User_Email_Id === user?.Email_Id ? review : "")
        }
        return [existcomment, UserData]
    }

    const [commentvalidation, uservalidation] = Alldelireviewsandratings();
     //For view Review & Ratings
     const [setViewModalVisible] = React.useState(false);
     const [isViewReviewModalVisible, setViewReviewModalVisible] = React.useState(false);

     const viewToggleModal = () => {
         if (isAuthenticated) {
             setViewReviewModalVisible(!isViewReviewModalVisible);
         }
         else {
             setViewModalVisible(true);
         }
     };

    //For add review
    const [isModalVisible, setModalVisible] = React.useState(false);
    const [isReviewModalVisible, setReviewModalVisible] = React.useState(false);
    const [rating, setRating] = useState(0);
    const user = useSelector(state => state.auth?.user);
    const [comment, setComment] = useState();

    const toggleModal = () => {
        if (isAuthenticated) {
            setReviewModalVisible(!isReviewModalVisible);
        }
        else {
            setModalVisible(true);
        }
    };

    const addReviewModal = (formData) => {
        let data={
                Comments: comment,
                Del_User_Email_Id: alldelireviewsandratings?.Del_User_Email_Id,
                Name: user?.User_Name,
                Order_Id: orders?.Order_Id,
                Order_Line_Item_Id: orders?.Item_Master_Id,
                Rating: rating,
                Status: "Active",
                User_Email_Id: user?.Email_Id,
        }
        let formValues = JSON.parse(JSON.stringify(formData));
        dispatch(createDelReviewRatingsAction(formValues, toast));
        setReviewModalVisible(false);
    }

    console.log(alldelireviewsandratings?.Rating)
    return (

        <Surface style={{ backgroundColor: '#F5F7F8', borderColor: 'gray', flex: 1 }}>
            <Header navigation={navigation} />
            <ScrollView>
            {invoiceMobile ? <>
                {invoiceDetails &&

                    <TouchableOpacity style={{ borderRadius: 5, alignItems: "center", padding: 5 }} onPress={printToFileWeb}>
                        <Surface style={{ flex: 1 }}>

                            <ScrollView>
                                <Card>
                                    <View style={{ margin: 20, flex: 1 }}>
                                        <View style={{ alignSelf: 'center', marginBottom: 30 }}><Text style={{ color: '#2EE1F4', fontSize: 28 }}>Invoice</Text></View>
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
                                            <Image source={require('../../assets/images/img/logo/logo.png')} style={{ width: 120, height: 45 }} />
                                            <View style={styles.headerContainer}>

                                                <View>
                                                    <View style={styles.invoiceNoContainer}>
                                                        <Text style={{ fontSize: 11, fontWeight: "bold" }}>Order ID:</Text><Text style={{ fontSize: 10 }}> {invoiceDetails.OrderId} </Text>
                                                    </View>
                                                    <View style={styles.invoiceDateContainer}>
                                                        <Text style={{ fontSize: 11, fontWeight: "bold" }}>Order Date:</Text><Text style={{ fontSize: 10 }}> {invoiceDetails.OrderDate} </Text>
                                                    </View>
                                                    <View style={styles.invoiceNoContainer}>
                                                        <Text style={{ fontSize: 11, fontWeight: "bold" }}>Invoice No: </Text><Text style={{ fontSize: 10 }}>{invoiceDetails.InvoiceNo} </Text>
                                                    </View>
                                                    <View style={styles.invoiceDateContainer}>
                                                        <Text style={{ fontSize: 11, fontWeight: "bold" }}>Invoice Date:</Text><Text style={{ fontSize: 10 }}>{invoiceDetails.InvoiceDate} </Text>
                                                    </View>
                                                </View>
                                            </View>
                                        </View>
                                        <Divider />
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
                                            <View>
                                                <Text style={{ fontSize: 11, marginTop: 20, paddingBottom: 3, fontWeight: 'bold', fontFamily: 'Helvetica-Oblique' }}>Billing Address: </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.BillingAddress.Name}</Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.BillingAddress.AddressDrToSt}</Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.BillingAddress.City}</Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.BillingAddress.State}, {invoiceDetails.BillingAddress.Country} </Text>
                                                <Text style={{ fontSize: 10 }}>+{invoiceDetails.BillingAddress.PhoneNumber} </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.BillingAddress.email} </Text>

                                            </View>
                                            <View >
                                                <Text style={{ fontSize: 11, fontStyle: 'italic', textAlign: 'right', marginTop: 20, paddingBottom: 3, fontWeight: 'bold' }}>Shipping Address: </Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>{invoiceDetails.ShippingAddress.Name}</Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>{invoiceDetails.ShippingAddress.AddressDrToSt}</Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>{invoiceDetails.ShippingAddress.City}</Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>{invoiceDetails.BillingAddress.State}, {invoiceDetails.BillingAddress.Country}</Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>+{invoiceDetails.ShippingAddress.PhoneNumber} </Text>
                                                <Text style={{ fontSize: 10, textAlign: 'right' }}>{invoiceDetails.ShippingAddress.email} </Text>
                                            </View>
                                        </View>
                                        <Divider style={{ color: 'blue' }} />
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
                                            <View >
                                                <Text style={{ fontSize: 11, fontStyle: 'italic', marginTop: 20, paddingBottom: 3, fontWeight: 'bold' }}>Sold By: </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.Partner.Name} </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.Partner.AddressDrToSt} </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.Partner.City}, {invoiceDetails.Partner.State}, {invoiceDetails.Partner.Country} </Text>
                                                <Text style={{ fontSize: 10 }}>{invoiceDetails.Partner.Name} </Text>
                                            </View>
                                            <View>
                                                <Text style={{ fontSize: 11, fontWeight: 'bold', textAlign: 'right', marginTop: 20 }}>PAN NO: {invoiceDetails.Partner.Pan} </Text>
                                                <Text style={{ fontSize: 11, fontWeight: 'bold', textAlign: 'right' }}>GST: {invoiceDetails.Partner.GST} </Text>

                                            </View>

                                        </View>
                                        <Divider />
                                        <View style={styles.tableContainer}>
                                            <DataTable>
                                                <View>

                                                    <DataTable.Header>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }} >SI No</Text></DataTable.Title>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }}>Description</Text></DataTable.Title>
                                                        <DataTable.Title> <Text style={{ fontSize: 11 }}>Rate</Text></DataTable.Title>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }}>QTY</Text></DataTable.Title>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }}>Amount</Text></DataTable.Title>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }}>IGST</Text></DataTable.Title>
                                                        <DataTable.Title><Text style={{ fontSize: 11 }}>IGST Amount</Text></DataTable.Title>
                                                    </DataTable.Header>

                                                </View>
                                                <View >
                                                    <DataTable.Row >
                                                        <DataTable.Cell>1</DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.name}</Text></DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.Amount}</Text></DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.Qty}</Text></DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.GrandTotal}</Text></DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.IGST}</Text></DataTable.Cell>
                                                        <DataTable.Cell><Text style={{ fontSize: 10 }}>{invoiceDetails.product.IGSTAmount}</Text></DataTable.Cell>
                                                    </DataTable.Row>

                                                </View>
                                            </DataTable>
                                        </View>
                                    </View>
                                </Card>
                                <Text style={styles.titleContainer}>Note: This is computer generated Invoice and signature is not required.</Text>
                            </ScrollView>
                        </Surface>
                    </TouchableOpacity>
                }
            </> :
                <>
                    <Surface style={{ color: 'white' }}>
                        <View style={{ width: dimensions > 500 ? "75%" : "95%", marginLeft: "auto", marginRight: "auto", }}>
                            <IconButton icon="keyboard-backspace" onPress={() => navigation.navigate('MyOrders')}>
                                Go Back
                            </IconButton>
                        </View>

                        <ScrollView>
                            <Portal>
                                <Dialog visible={visible} onDismiss={hideDialog} style={{ width: (dimensions >= 500) ? 400 : 270, maxHeight: (dimensions >= 500) ? 500 : 350, marginLeft: 'auto', marginRight: 'auto' }}>
                                    <View style={{ alignItems: 'flex-end' }}>
                                        <IconButton
                                            icon="close"
                                            size={20}
                                            onPress={() => setVisible(!visible)}
                                        />
                                    </View>
                                    <Dialog.Title style={{ marginLeft: 55, marginTop: -20, fontSize: 20 }}>
                                        <View style={{ justifyContent: 'center', alignContent: 'center', alignItems: 'center', alignSelf: 'center', marginRight: 20, }}>
                                            <Image style={{
                                                width: 35,
                                                height: 35,
                                            }} source={require('../../assets/images/orders/warnings.jpg')} />
                                        </View>
                                        <Text style={{ color: "blue", fontSize: 20, }}>Alert!</Text>
                                    </Dialog.Title>
                                    <Dialog.ScrollArea>
                                        <ScrollView >
                                            <Dialog.Content>
                                                <View>
                                                    <Text>Are you sure you want to cancel the order?</Text>
                                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                                                        <Button mode="outlined" onPress={() => { cancelhandleClick(data) }} >
                                                            Yes
                                                        </Button>
                                                        <Button mode="outlined" onPress={() => { setVisible(!visible) }}>
                                                            No
                                                        </Button>
                                                    </View>
                                                </View>
                                            </Dialog.Content>
                                        </ScrollView>
                                    </Dialog.ScrollArea>
                                </Dialog>
                                <Dialog visible={visibleone} onDismiss={hideDialog} style={{ width: (dimensions >= 500) ? 400 : 270, maxHeight: (dimensions >= 500) ? 500 : 350, marginLeft: 'auto', marginRight: 'auto', }}>
                                    <View style={{ alignItems: 'flex-end' }}>
                                        <IconButton
                                            icon="close"
                                            size={20}
                                            onPress={() => setVisibleOne(!visibleone)}
                                        />
                                    </View>
                                    <Dialog.Title style={{ marginLeft: 75, fontSize: 20, marginTop: -20 }}>
                                        <View style={{
                                            justifyContent: 'center', alignContent: 'center', alignItems: 'center',
                                            alignSelf: 'center', marginRight: 20,
                                        }}>
                                            <Image style={{
                                                width: 35,
                                                height: 35,
                                            }} source={require('../../assets/images/orders/warnings.jpg')} />
                                        </View>
                                        <View style={{ paddingTop: -30 }}> <Text style={{ color: "blue", fontSize: 20 }}>Alert!</Text></View>
                                    </Dialog.Title>
                                    <Dialog.ScrollArea>
                                        <ScrollView >
                                            <Dialog.Content>
                                                <View>
                                                    <Text>Are you sure you want to Return the order?</Text>
                                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                                                        <Button mode="outlined" onPress={() => { returnhandleClicks(data) }} >
                                                            Yes </Button>
                                                        <Button mode="outlined" onPress={() => { setVisibleOne(!visibleone) }}>
                                                            No </Button>
                                                    </View>
                                                </View>
                                            </Dialog.Content>
                                        </ScrollView>
                                    </Dialog.ScrollArea>
                                </Dialog>
                            </Portal>
                            <View style={{ marginLeft: 5, marginRight: 5 }}>
                                <View style={{
                                    shadowColor: '#0E9EAD',
                                    shadowOffset: { width: -2, height: 4 },
                                    shadowOpacity: 0.2,
                                    shadowRadius: 3,
                                }}>
                                    {alldetails &&
                                        <View style={{ flex: 5, flexDirection: 'column', marginLeft: 10 }}  >
                                            <Text style={{ fontSize: 15, fontWeight: 'bold', color: 'blue', marginBottom: 10 }}>Delivery Address </Text>
                                            <Text style={{ fontSize: 14, marginBottom: 10, fontWeight: 'bold' }}>{alldetails.Name},</Text>
                                            <Text style={{ fontSize: 13 }}>D-No : {alldetails.Door_Number},{alldetails.Street}, {alldetails.Landmark},</Text>
                                            <Text style={{ fontSize: 13 }}>{alldetails.City},{alldetails.State},{alldetails.Country},</Text>
                                            <Text style={{ fontSize: 13 }}>{alldetails.City}-{alldetails.Zip},</Text>
                                            <Text style={{ fontSize: 13, marginBottom: 10 }}>Phone number : {alldetails.Mobile}.  </Text>
                                        </View>
                                    }
                                </View>
                                {alldelireviewsandratings&&
                                <View>
                                {Orders.map((data, index) => (
                                    <View key={index}>
                                        <View>

                                            <View key={index}
                                                style={{
                                                    shadowColor: '#0E9EAD',
                                                    shadowOffset: { width: -2, height: 4 },
                                                    shadowOpacity: 0.2,
                                                    shadowRadius: 3,
                                                    marginHorizontal: 1, padding: 1, margin: 'auto', backgroundColor: 'white', marginTop: (Platform.OS === 'web' ? 15 : 0), flexDirection: 'row',
                                                    alignItems: 'flex-start',
                                                    elevation: 10,
                                                    maxWidth: (Platform.OS === 'web' ? 650 : 550),
                                                    maxHeight: windowHeight > 250 ? 250 : 75,
                                                    minHeight: 140,
                                                    borderColor: 'grey',
                                                    borderWidth: 0.5,
                                                    borderRadius: 10
                                                }}
                                            >
                                                <View style={{ flex: 1, alignContent: 'center', marginLeft: 10 }} >
                                                    <TouchableOpacity onPress={handleClick(data)}>
                                                        <Image source={{ uri: data.Product_Image }} style={{ height: 100, marginTop: 15, width: 80, resizeMode: 'contain' }}></Image>
                                                    </TouchableOpacity>
                                                </View>
                                                <View style={{ flex: 2, flexDirection: 'column' }}  >
                                                    <Text style={{ fontSize: 14, paddingTop: 10, fontWeight: 'bold' }}>{data.Product_Name}</Text>
                                                    <Text style={{}}>Order ID : {data.Order_Id}</Text>
                                                    <View style={{ flexDirection: 'row' }}>
                                                        <Text style={{}}>Order Status :</Text>
                                                        <Text style={{ color: data.Order_Status === "NEW" ? "blue" : data.Order_Status === "COMPLETED" ? "green" : data.Order_Status === "CANCELLED" ? "red" : data.Order_Status === "RETURN" ? "orange" : "black" }}>{data.Order_Status === "NEW" ? "ORDERED" : data.Order_Status === "COMPLETED" ? "DELIVERED" : data.Order_Status === "RETURN" ? "RETURN COMPLETE" : data.Order_Status === "REFUND" ? "REFUNDED" : data.Order_Status}</Text>
                                                    </View>
                                                    <Text style={{}}>Order Date : {data.Order_Date}</Text>
                                                    <View style={{ flexDirection: 'row' }}>
                                                        <Text style={{}}>Partner Name :</Text><Text style={{ color: "#A61010" }}>{data.Partner_Name}</Text>
                                                    </View>
                                                    <View style={{ flexDirection: 'row', margin: 5, }}>
                                                        <TouchableOpacity
                                                            style={{ backgroundColor:data.Order_Status === "NEW" || data.Order_Status === "PACKED" || data.Order_Status === "SHIPPED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN" || data.Is_Return_Flag === "0" ? 'transparent' : "#4BBFF9", width: 80, borderRadius: 5, alignItems: "center", padding: 5, opacity: issubmitted ? 0.2 :"",
                                                            visibility: data.Order_Status === "NEW" || data.Order_Status === "PACKED" || data.Order_Status === "SHIPPED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN" || data.Is_Return_Flag === "0" ? "hidden" : "visible" }}
                                                            disabled={
                                                                data.Order_Status === "NEW" || data.Order_Status === "PACKED" || data.Order_Status === "SHIPPED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN" || issubmitted ? true : false
                                                            }
                                                            onPress={() => { setData(data); setVisibleOne(!visibleone), setSubmit(!issubmitted) }}
                                                        >
                                                            <Text style={{ color: data.Order_Status === "NEW" || data.Order_Status === "PACKED" || data.Order_Status === "SHIPPED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN" || data.Is_Return_Flag === "0" ? 'transparent' :'white' }}> RETURN </Text>
                                                        </TouchableOpacity>
                                                        <TouchableOpacity
                                                            style={{ backgroundColor:data.Order_Status === "COMPLETED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN"?'transparent':"#4BBFF9", width: 80, marginLeft:-80,borderRadius: 5, alignItems: "center", padding: 5, opacity: issubmitted ? 0.2 :"",
                                                            visibility: data.Order_Status === "COMPLETED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN" ? "hidden" : "visible" }}
                                                            disabled={
                                                                data.Order_Status === "COMPLETED" || data.Order_Status === "CANCELLED" || issubmitted ? true : false
                                                            }
                                                            onPress={() => { setData(data); setVisible(!visible), setSubmit(!issubmitted) }}
                                                        >
                                                            <Text style={{ color: data.Order_Status === "COMPLETED" || data.Order_Status === "CANCELLED" || data.Order_Status === "REFUND" || data.Order_Status === "RETURN"?'transparent':'white' }}> CANCEL </Text>
                                                        </TouchableOpacity>
                                                    </View>
                                                </View>
                                            </View>

                                        </View>
                                        <View style={styles.separator} />
                                        <TouchableOpacity style={{ backgroundColor: "#4BBFF9", borderRadius: 5, alignItems: "center", padding: 5 }} onPress={printToFile}>
                                            <View>
                                                <Text style={{ color: 'white' }} >Download Invoice</Text>
                                                {/* <Button title='Print to PDF file' onPress={printToFile} /> */}
                                                {selectedPrinter ? <Text style={styles.printer}>{`Selected printer: ${selectedPrinter.name}`}</Text> : undefined}
                                            </View>
                                        </TouchableOpacity>
                                        <View style={styles.separator} />
                                        <View key={index} style={{ marginTop: (Platform.OS === 'web' ? '15%' : '10%') }}>
                                                <StepIndicator
                                                    customStyles={data.Order_Status === "CANCELLED"?cancelStyles:customStyles}
                                                    labels={data.Order_Status === "CANCELLED" ? cancellabels : data.Order_Status === "RETURNED" ? returnlabels : orderlabels}
                                                    currentPosition={data.Order_Status === "NEW" ? 0 : data.Order_Status === "PACKED" ? 1 : data.Order_Status === "SHIPPED" ? 2 : 3}
                                                    stepCount={data.Order_Status === "RETURNED" ? 2 :data.Order_Status === "CANCELLED"?2: 4}
                                                />
                                        </View>

                                        {/* Delivery Person Reviews and Ratings */}
                                        <View style={{ padding: 10 }}>
                                                {!alldelireviewsandratings&&data.Order_Status === "DELIVERED" ?
                                                    <TouchableOpacity
                                                        style={{ backgroundColor: "#4BBFF9", borderRadius: 5, alignItems: "center", padding: 10 }}
                                                        onPress={() => toggleModal()}
                                                    >
                                                        <Text style={{ color: 'white' }}>Add Delivery Review</Text>
                                                    </TouchableOpacity>
                                                    :
                                                    alldelireviewsandratings && data.Order_Status === "DELIVERED"?
                                                    <View>
                                                    <Text onPress={() => {viewToggleModal()}} style={{ fontWeight: "bold" }}>Delivery Review</Text>
                                                    <Rating
                                                        readonly={true}
                                                        rating={alldelireviewsandratings?.Rating ? parseInt(alldelireviewsandratings?.Rating) : 0}
                                                        type='custom'
                                                        ratingBackgroundColor='#c8c7c8'
                                                        startingValue={alldelireviewsandratings?.Rating}
                                                        ratingCount={5}
                                                        imageSize={20}
                                                        style={{ marginTop: -20 }}
                                                        minValue={1}
                                                        onFinishRating={(rating) => ratingCompleted(rating)}
                                                        name="rating"        
                                                    />
                                                </View> 
                                            : null
                                            }
                                            </View>

                                             {/* For Add Review */}
                                             <Modal animationIn={"slideInDown"}
                                                deviceWidth={dimensions.width}
                                                deviceHeight={dimensions.height}
                                                style={{ alignItems: 'center' }} isVisible={isReviewModalVisible}>
                                                <View style={{ flex: 1, maxWidth: 500, minWidth: 300, maxHeight: 300, borderRadius: 10, backgroundColor: Colors.white }}>
                                                    <View style={{
                                                        alignItems: 'flex-end'
                                                    }}>
                                                        <TouchableRipple style={{ width: 36 }} onPress={() => setReviewModalVisible(false)}>
                                                            <Avatar.Icon color={'black'} style={{ backgroundColor: Colors.white }} size={36} icon="close" />
                                                        </TouchableRipple>
                                                    </View>
                                                    <DeliveryAddReview orders={orders} responseFunction={addReviewModal}
                                                 />
                                                </View>
                                            </Modal>

                                            {/* For view Review & Ratings */}
                                            <Modal animationIn={"slideInDown"}
                                                deviceWidth={dimensions.width}
                                                deviceHeight={dimensions.height}
                                                style={{ alignItems: 'center' }} isVisible={isViewReviewModalVisible}>
                                                <View style={{ flex: 1, maxWidth: 500, minWidth: 300, maxHeight: 200, borderRadius: 10, backgroundColor: Colors.white }}>
                                                    <View style={{
                                                        alignItems: 'flex-end'
                                                    }}>
                                                        <TouchableRipple style={{ width: 36 }} onPress={() => { setViewReviewModalVisible(false) }} >
                                                            <Avatar.Icon color={'black'} style={{ backgroundColor: Colors.white }} size={36} icon="close" />
                                                        </TouchableRipple>
                                                    </View>
                                                    <View style={{ margin: '4%' }}>
                                                        <Text style={{ fontWeight: "bold", padding: 10 }}>Comment : {alldelireviewsandratings?.Comments}</Text>
                                                        <Text style={{ fontWeight: "bold", padding: 10 }}>Rating :  </Text>
                                                        <Rating
                                                            readonly={true}
                                                            rating={alldelireviewsandratings?.Rating ? parseInt(alldelireviewsandratings?.Rating) : 0}
                                                            type='custom'
                                                            ratingBackgroundColor='#c8c7c8'
                                                            startingValue={alldelireviewsandratings?.Rating}
                                                            ratingCount={5}
                                                            imageSize={20}
                                                            style={{ marginTop: -30 }}
                                                            minValue={1}
                                                            onFinishRating={(rating) => ratingCompleted(rating)}
                                                            name="rating"
                                                           
                                                        />
                                                    </View>
                                                </View>
                                            </Modal>
                                    </View>
                                ))}
                                </View>}
                            </View>

                        </ScrollView>
                    </Surface>
                </>
            }
       </ScrollView>
        </Surface>
    )
}

const DeliveryAddReview = ({ responseFunction,orders }) => {
    const [rating, setRating] = useState(0);
    const [ratingError, setRatingError] = useState(false);
    const [comment, setComment] = useState("");
    const user = useSelector(state => state.auth?.user);
    let alldelireviewsandratings = useSelector(state => state.delreviewrating.delreviewratings.all);
    // Comment validations
    const handleOnChange = (value) => {
        setComment(value);
    }

    const addReviewModal = (data) => {
        let error = false;
        if (rating <= 0) {
            setRatingError(true);
            error = true;
        } else {
            setRatingError(false);
        }
        if (!error) {
            let formData = {
                Comments: comment,
                Del_User_Email_Id: alldelireviewsandratings?.Del_User_Email_Id,
                Name: user?.User_Name,
                Order_Id: orders?.Order_Id,
                Order_Line_Item_Id: orders?.Item_Master_Id,
                Rating: rating,
                Status: "Active",
                User_Email_Id: user?.Email_Id,
            }
            responseFunction(formData);
        }
    }

    return (
        <View style={{ margin: '4%' }}>
            <TextInput
                theme={{ colors: { primary: '#27B6CC', underlineColor:'transparent'}}}
                label='Add Review'
                mode='outlined'
                onChangeText={(Text) => { handleOnChange(Text); }}
                multiline={true}
                numberOfLines={4}
                value={comment}
            />
            <View style={{
                alignItems: 'center',
                justifyContent: 'center',
                alignContent: 'center'
            }}>
                <Rating
                    type='custom'
                    ratingBackgroundColor='#c8c7c8'
                    startingValue={rating || 0}
                    ratingCount={5}
                    imageSize={30}
                    style={{ paddingVertical: 10 }}
                    onFinishRating={(value) => { setRating(value); setRatingError(false) }}
                />
                <HelperText>
                    {ratingError &&
                        <Text style={{ color: "red" }}>
                            Please select the Rating.
                        </Text>
                    }
                </HelperText>
                <View style={{ fontSize: 20 }}>
                    <TouchableOpacity style={{ backgroundColor: '#27B6CC', borderRadius: 5 }} onPress={() => addReviewModal(orders)}>
                        <Text style={{ color: '#ffffff', margin:10 }}>SUBMIT</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}


const styles = StyleSheet.create({
    separator: {
        height: 1,
        backgroundColor: "#CCCCCC",
    },
    text: {

    },
    button: {
        alignItems: "center",
        backgroundColor: "#DDDDDD",
        padding: 10
    },
    invoiceNoContainer: {
        flexDirection: 'row',
        // marginTop: 36,
        justifyContent: 'flex-end'
    },
    invoiceDateContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end'
    },
    invoiceDate: {
        fontSize: 12,
    },
    page: {
        fontSize: 11,
        paddingTop: 30,
        paddingLeft: 60,
        paddingRight: 60,
        lineHeight: 1.5,
        flexDirection: 'column',
    },


    tableContainer: {
        flexDirection: 'row',
        // flexWrap: 'wrap',
        marginTop: 24,
        borderWidth: 1,
        borderColor: '#bff0fd',
    },

    headerContainer: {
        marginTop: -10
    },
    container: {
        borderBottomColor: '#bff0fd',
        backgroundColor: '#bff0fd',
        borderBottomWidth: 1,
        // fontStyle: 'bold',
        flexGrow: 1,

    },
    titleContainer: {
        marginTop: "auto",
        textAlign: 'center',
        // width: "100%",
        fontSize: 10,
    },
});









                                   {/* Delivery Person Reviews and Ratings */}
                                        <View style={{ padding: 10 }}>
                                            {!isEmpty(alldelireviewsandratings) && alldelireviewsandratings ?.
                                            filter((delorder) => delorder?.Order_Line_Item_Id === data?.Item_Master_Id).map((delorder) => {
                                                !delorder && data.Order_Status === "DELIVERED" ?
                                                    <TouchableOpacity
                                                        style={{ backgroundColor: "#4BBFF9", borderRadius: 5, alignItems: "center", padding: 10 }}
                                                        onPress={() => toggleModal()}
                                                    >
                                                        <Text style={{ color: 'white' }}>Add Delivery Review</Text>
                                                    </TouchableOpacity>
                                                    :
                                                    delorder && data.Order_Status === "DELIVERED"?
                                                    <View>
                                                    <Text onPress={() => {viewToggleModal()}} style={{ fontWeight: "bold" }}>Delivery Review</Text>
                                                    <Rating
                                                        readonly={true}
                                                        rating={delorder?.Rating ? parseInt(delorder?.Rating) : 0}
                                                        type='custom'
                                                        ratingBackgroundColor='#c8c7c8'
                                                        startingValue={delorder?.Rating}
                                                        ratingCount={5}
                                                        imageSize={20}
                                                        style={{ marginTop: -20 }}
                                                        minValue={1}
                                                        onFinishRating={(rating) => ratingCompleted(rating)}
                                                        name="rating"        
                                                    />
                                                </View> 
                                            : null
                                            })}
                                            </View>













   {/* Delivery Person Reviews and Ratings */}
                                        <View style={{ padding: 10 }}>
                                             {alldelireviewsandratings?.filter((delorder) => delorder?.Order_Line_Item_Id === data?.Item_Master_Id).map(delorder => {
                                                // !delorder && data.Order_Status === "DELIVERED" ?
                                                    <TouchableOpacity
                                                        style={{ backgroundColor: "#4BBFF9", borderRadius: 5, alignItems: "center", padding: 10 }}
                                                        onPress={() => toggleModal()}
                                                    >
                                                        <Text style={{ color: 'white' }}>Add Delivery Review</Text>
                                                    </TouchableOpacity>
                                                    // :
                                                    delorder && data.Order_Status === "DELIVERED"?
                                                    <View>
                                                    <Text onPress={() => {viewToggleModal()}} style={{ fontWeight: "bold" }}>Delivery Review</Text>
                                                    <Rating
                                                        readonly={true}
                                                        rating={delorder?.Rating ? parseInt(delorder?.Rating) : 0}
                                                        type='custom'
                                                        ratingBackgroundColor='#c8c7c8'
                                                        startingValue={delorder?.Rating}
                                                        ratingCount={5}
                                                        imageSize={20}
                                                        style={{ marginTop: -20 }}
                                                        minValue={1}
                                                        onFinishRating={(rating) => ratingCompleted(rating)}
                                                        name="rating"        
                                                    />
                                                </View> 
                                              : null
                                            })}
                                            </View>











 <View style={{ padding: 10 }}>
                                        {alldelireviewsandratings?.filter((delorder) => delorder?.Order_Line_Item_Id === data?.Item_Master_Id) ? 
                                        //   !delorder && data.Order_Status === "DELIVERED" ?
                                           <TouchableOpacity
                                           style={{ backgroundColor: "#4BBFF9", borderRadius: 5, alignItems: "center", padding: 10 }}
                                           onPress={() => toggleModal()}
                                           >
                                           <Text style={{ color: 'white' }}>Add Delivery Review</Text>
                                           </TouchableOpacity>
                                        : delorder && data.Order_Status === "DELIVERED" ? (
                                        <View style={{ flex: 1 }}>
                                        <FlatList
                                            data={alldelireviewsandratings?.filter((delorder) => delorder?.Order_Line_Item_Id === data?.Item_Master_Id)}
                                            renderItem={<View>
                                                <Text onPress={() => {viewToggleModal()}} style={{ fontWeight: "bold" }}>Delivery Review</Text>
                                                <Rating
                                                    readonly={true}
                                                    rating={delorder?.Rating ? parseInt(delorder?.Rating) : 0}
                                                    type='custom'
                                                    ratingBackgroundColor='#c8c7c8'
                                                    startingValue={delorder?.Rating}
                                                    ratingCount={5}
                                                    imageSize={20}
                                                    style={{ marginTop: -20 }}
                                                    minValue={1}
                                                    onFinishRating={(rating) => ratingCompleted(rating)}
                                                    name="rating"        
                                                />
                                            </View>}
                                        />)
                                       </View>
                                         : null}
                                        </View>