import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { ThemeProvider } from "@mui/material/styles";
import { 
    Box, Grid, Typography, Button, TextField,
    InputAdornment, FormControl, Chip, InputLabel,
    Select, MenuItem
} from "@mui/material";
import currencies from "../../currencies.json";
import { SnackbarNotice, ConfirmationDialog } from "../../functions";
import LoadingButton from "@mui/lab/LoadingButton";

class PaymentDetails extends Component {

    state = {
        buttonDisable: true,
        showPaymentForm: false,
        allPayments: [],
        addFormData: {
            paymentPrice: 1,
            paymentPaid: "",
            paymentDue: "",
            paymentMethod: "On Site",
            paymentStatus: "Pending"
        },
        errors: {
            paymentPrice: false,
            paymentStatus: false
        },
        statuses: [
            "Pending",
            "Paid",
            "Partially Paid",
        ],
        confirmationDialogOpen: false,
        confirmationLoading: false,
        PaymentToDelete: null,
        loading: false,
    }

    componentDidMount() {
        this.fetchPaymentByAppointment();
    }

    fetchPaymentByAppointment = () => {
        const { editFormData } = this.props;

        fetch(`${wpbAdmin.root}bookify/v1/appointment-payment?id=${editFormData.appointment_id}`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            }
        })
        .then((response) => response.json())
        .then((data) => {

            const allPayments = data.data;
            const totalPaid = allPayments.reduce((sum, payment) => sum + parseFloat(payment.payment_paid), 0);
            const paymentTotal = editFormData.appointment_price > 0 ? parseFloat( editFormData.appointment_price ) : 0;
            const paymentDue = paymentTotal - totalPaid;
            let restrictAddPayment;
            if ( paymentDue != 0 ) {
                restrictAddPayment = false;
            } else {
                restrictAddPayment = true;
            }

            this.setState(prevState => ({
                addFormData: {
                    ...prevState.addFormData,
                    paymentPrice: paymentDue,
                    paymentDue: paymentDue
                },
                allPayments: allPayments,
                buttonDisable: restrictAddPayment
            }));
        })
        .catch(error => {
            console.error("Error:", error);
        })
    };

    handleInputChange = (event) => {
        const { name, value } = event.target;
        const { editFormData } = this.props;
        const { addFormData } = this.state;

        if ( name === "paymentPrice" ) {
            const numericValue = parseFloat( value );
            const maxValue = addFormData.paymentDue ? parseFloat( addFormData.paymentDue ) : parseFloat( editFormData.appointment_price );
            if ( numericValue < 0 || numericValue > maxValue ) {
                return;
            }
        }

        this.setState(prevState => ({
            addFormData: {
                ...prevState.addFormData,
                [name]: value,
            },
            errors: { ...prevState.errors, [name]: false }
        }));
    };

    handleAddPayment = () => {
        this.setState({ 
            buttonDisable: true, 
            showPaymentForm: true 
        });
    };

    handlePaymentSave = () => {
        const { addFormData } = this.state;
        const { editFormData } = this.props;

        const errors = {
            paymentPrice: !addFormData.paymentPrice,
        };

        this.setState({ errors });

        if ( errors.paymentPrice ) {
            return;
        }

        this.setState({ loading: true });

        const paymentToBePaid = addFormData.paymentDue - addFormData.paymentPrice;

        const dataToSend = {};
        dataToSend.appointment_id = editFormData.appointment_id;
        dataToSend.appointment_total = editFormData.appointment_price;
        dataToSend.payment_price = addFormData.paymentPrice;
        dataToSend.payment_due = paymentToBePaid;
        dataToSend.payment_method = addFormData.paymentMethod;
        dataToSend.payment_status = addFormData.paymentStatus;

        fetch(`${wpbAdmin.root}bookify/v1/add-payment`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then(response => {
            if ( response.success ) {
                this.setState({ 
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success",
                    loading: false,
                    showPaymentForm: false,
                    addFormData: {
                        paymentPrice: 1,
                        paymentMethod: "On Site",
                        paymentStatus: "Pending"
                    },
                });
                this.fetchPaymentByAppointment();
            } else {
                this.setState({ 
                    snackbarOpen: true, 
                    snackbarMessage: response.message, 
                    snackbarType:  "error",
                    loading: false,
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ loading: false });
        })
    }

    handleDeleteAddPayment = () => {
        this.setState(prevState => ({
            addFormData: {
                ...prevState.addFormData,
                paymentPrice: 1,
                paymentStatus: "Pending"
            },
            buttonDisable: false, 
            showPaymentForm: false,
        }));
    }

    handlePaymentDelete = (payment) => {
        this.setState({ confirmationDialogOpen: true, PaymentToDelete: payment });
    };

    confirmationPaymentDelete = () => {
        const { PaymentToDelete } = this.state;
        this.setState({ confirmationLoading: true });
        
        const dataToSend = {};
        dataToSend.payment_id = PaymentToDelete.id;
        dataToSend.total_amount = PaymentToDelete.payment_total;
        dataToSend.appointment_id = PaymentToDelete.appointment_id;

        fetch(`${wpbAdmin.root}bookify/v1/delete-payment`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-WP-Nonce": wpApiSettings.nonce
            },
            body: JSON.stringify(dataToSend)
        })
        .then(response => response.json())
        .then((response) => {
            if ( response.success ) {
                this.setState({ 
                    confirmationDialogOpen: false,
                    confirmationLoading: false,
                    PaymentToDelete: null,
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "success",
                });
                this.fetchPaymentByAppointment();
            } else {
                this.setState({ 
                    confirmationLoading: false,
                    snackbarOpen: true,
                    snackbarMessage: response.message,
                    snackbarType: "error",
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            this.setState({ confirmationLoading: false });
        })
    }
    

    render() {
        const { currency, editFormData, theme } = this.props;
        const { buttonDisable, showPaymentForm, allPayments, statuses, addFormData, errors, snackbarOpen, snackbarMessage, snackbarType, confirmationDialogOpen, confirmationLoading, loading } = this.state;
        const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);

        return(
            <ThemeProvider theme={theme}>
                <Box component="form">
                    <Grid container spacing={3} direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={5}>
                            <Typography
                                variant="h6"
                                sx={{
                                    textTransform: "capitalize",
                                }}
                            >
                                {__("Payments", "bookify")}
                            </Typography>
                        </Grid>
                        <Grid item xs={5} sx={{display:"flex", flexDirection:"column", alignItems:"flex-end"}}>
                            <Button variant="contained" disabled={buttonDisable} onClick={this.handleAddPayment}
                                sx={{
                                    boxShadow: "none",
                                    backgroundColor: "#EBF8F8",
                                    color: "#036666",
                                    "&:hover": {
                                        backgroundColor: "#DAEFEF",
                                        boxShadow: "none",
                                    }
                                }}
                            >
                                <Typography
                                    sx={{
                                        fontSize: "13px",
                                        lineHeight: "24px",
                                        textTransform: "capitalize",
                                    }}
                                >
                                    {__("Add Payment", "bookify")}
                                </Typography>
                            </Button>
                        </Grid>
                    </Grid>
                    {allPayments.map((payment) => (
                        <Grid container spacing={2} direction="row" justifyContent="space-between" alignItems="flex-end"
                            sx={{
                                border: "1px solid #DDEEEE", 
                                backgroundColor: "#F8FCFC",
                                borderRadius: "5px",
                                padding: "15px", 
                                mt: "unset", 
                                ml: "unset",
                                mt: "2rem",
                                width: "100%"
                            }}
                        >
                            <Grid item md={6} sx={{pl:"unset !important", pt:"unset !important", display:"flex", gap:"45px"}}>
                                <Box component={"span"}>
                                    <Typography variant="subtitle2"sx={{textTransform:"capitalize", lineHeight:"24px"}}>
                                        {__("Payment Method: ", "bookify")}
                                    </Typography>
                                    <Typography variant="subtitle2"sx={{textTransform:"capitalize", lineHeight:"24px"}}>
                                        {__("Payment Status: ", "bookify")}
                                    </Typography>
                                    <Typography variant="subtitle2"sx={{textTransform:"capitalize", lineHeight:"24px"}}>
                                        {__("Paid: ", "bookify")}
                                    </Typography>
                                    <Typography variant="subtitle2"sx={{textTransform:"capitalize", lineHeight:"24px"}}>
                                        {__("Due: ", "bookify")}
                                    </Typography>
                                    <Typography variant="subtitle2"sx={{textTransform:"capitalize", lineHeight:"24px", fontWeight:"600"}}>
                                        {__("Total: ", "bookify")}
                                    </Typography>
                                </Box>
                                <Box component={"span"}>
                                    <Typography variant="body1" sx={{fontSize:"13px", lineHeight:"24px"}}>
                                        {payment.payment_method}
                                    </Typography>
                                    <Typography variant="body1" sx={{fontSize:"13px", lineHeight:"24px", borderRadius:"50px", padding:"0px 12px", width:"fit-content",
                                        color: payment.payment_status == "Partially Paid" ? "#74561C" : payment.payment_status === "Paid" ? "#555E48" : payment.payment_status === "Pending" ? "#AF5653" : "#000",
                                        backgroundColor: payment.payment_status == "Partially Paid" ? "#FFF4E3" : payment.payment_status === "Paid" ? "#E7F3D7" : payment.payment_status === "Pending" ? "#FFEDED" : "#000"
                                        }}
                                    >
                                        {payment.payment_status}
                                    </Typography>
                                    <Typography variant="body1" sx={{fontSize:"13px", lineHeight:"24px"}}>
                                        {`${matchedCurrency.symbol_native} ${payment.payment_paid}` }
                                    </Typography>
                                    <Typography variant="body1" sx={{fontSize:"13px", lineHeight:"24px"}}>
                                        {`${matchedCurrency.symbol_native} ${payment.payment_due}`}
                                    </Typography>
                                    <Typography variant="body1" sx={{fontSize:"13px", lineHeight:"24px", fontWeight:"600"}}>
                                        {`${matchedCurrency.symbol_native} ${payment.payment_total}`}
                                    </Typography>
                                </Box>
                            </Grid>
                            <Grid item md={4} sx={{pl:"unset !important", pt:"unset !important"}}>
                                    <Grid container spacing={3} direction="row" justifyContent="space-between" alignItems="center">
                                        <Grid item md={12} sx={{display:"flex", flexDirection:"column", alignItems:"flex-end"}}>
                                            <Chip
                                                label="Delete Payment"
                                                onClick={() => this.handlePaymentDelete( payment )}
                                                onDelete={() => this.handlePaymentDelete( payment )}
                                                deleteIcon={<></>}
                                                variant="deletebtn"
                                            />
                                        </Grid>
                                    </Grid>
                                </Grid>
                        </Grid>
                    ))}
                    {showPaymentForm && (
                        <Box component={'div'} sx={{border:"1px solid #DDEEEE", borderRadius:"5px", mt:"2rem", padding:"15px", display:"flex", alignItems:"flex-end"}}>
                            <Grid container spacing={3} direction="row" alignItems="flex-end" justifyContent="flex-start" sx={{mt:"unset", ml:"unset", width:"100%", gap:"15px"}}>
                                <Grid item sx={{pl:"unset !important", pt:"unset !important", width:"47%"}}>
                                    <TextField
                                        fullWidth
                                        error={errors.paymentPrice}
                                        required
                                        type="number"
                                        name="paymentPrice"
                                        label={__("Price", "bookify")}
                                        value={addFormData.paymentPrice}
                                        onChange={this.handleInputChange}
                                        InputProps={{
                                            startAdornment: (
                                                <InputAdornment position="start">
                                                    {matchedCurrency.symbol_native}
                                                </InputAdornment>
                                            ),
                                        }}
                                        inputProps={{
                                            min: 0,
                                            max: addFormData.paymentDue ? addFormData.paymentDue : editFormData ? parseInt( editFormData.appointment_price ) : ""
                                        }}
                                        sx={{
                                            marginTop: "1rem",
                                            "& input[type=number]": {
                                                padding: "10px",
                                                fontSize: "15px"
                                            },
                                            "& input[type=number]::-webkit-outer-spin-button": {
                                                WebkitAppearance: "none",
                                                margin: 0,
                                            },
                                            "& input[type=number]::-webkit-inner-spin-button": {
                                                WebkitAppearance: "none",
                                                margin: 0,
                                            },
                                            "& label": {
                                                color: "#789595"
                                            },
                                            "& fieldset": {
                                                borderColor: "#BFD4D4",
                                            },
                                            "& .MuiInputBase-root:hover fieldset": {
                                                borderColor: "#BFD4D4",
                                            },
                                            "& .MuiFormLabel-asterisk": {
                                                color: "#A61616",
                                            },
                                        }}
                                    />
                                </Grid>
                                <Grid item sx={{pl:"unset !important", pt:"unset !important", width:"47%"}}>
                                    <FormControl fullWidth>
                                        <InputLabel id="payment-status-label" htmlFor="payment-status" required error={errors.paymentStatus} sx={{color:"#789595", "& .MuiFormLabel-asterisk": {color:"#A61616"}}}>{__("Status", "bookify")}</InputLabel>
                                        <Select
                                            id="payment-status"
                                            error={errors.paymentStatus}
                                            required
                                            labelId="payment-status-label"
                                            label={__("Status", "bookify")} 
                                            name="paymentStatus"
                                            value={addFormData.paymentStatus}
                                            onChange={this.handleInputChange}
                                            sx={{
                                                "& .MuiSelect-select": {
                                                    padding: "10px 15px",
                                                    fontSize: "15px"
                                                },
                                                "& fieldset": {
                                                    borderColor: "#BFD4D4",
                                                },
                                                "& .MuiInputBase-root:hover fieldset": {
                                                    borderColor: "#BFD4D4",
                                                },
                                            }}
                                        >
                                            {statuses.map((value) => (
                                                <MenuItem key={value} value={value}>
                                                    {value}
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container spacing={3} direction="row" alignItems="flex-end" justifyContent="flex-end" sx={{mt:"unset", ml:"unset", width:"40%"}}>
                                <Grid item sx={{pl:"unset !important", pt:"unset !important", display:"flex", flexDirection:"column", alignItems:"stretch"}}>
                                    <LoadingButton variant="wpbkThemeModalBtn" onClick={this.handlePaymentSave} loading={loading}>
                                        {__("Save", "bookify")}
                                    </LoadingButton>
                                </Grid>
                                <Grid item sx={{pl:"unset !important", pt:"unset !important"}}>
                                    <Button variant="wpbkCancelbtn" onClick={this.handleDeleteAddPayment}>
                                        {__("Cancel", "bookify")}
                                    </Button>
                                </Grid>
                            </Grid>
                        </Box>
                    )}
                </Box>
                <SnackbarNotice
                    state={this.state}
                    setState={this.setState.bind(this)}
                    open={snackbarOpen}
                    message={snackbarMessage}
                    type={snackbarType}
                />
                <ConfirmationDialog
                    open={confirmationDialogOpen}
                    onClose={() => this.setState({ confirmationDialogOpen: false, PaymentToDelete: null })}
                    onConfirm={this.confirmationPaymentDelete}
                    loading={confirmationLoading}
                />
            </ThemeProvider>
        )
    }
}

export default PaymentDetails;