import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { ThemeProvider } from "@mui/material/styles";
import { 
    Grid, Typography, FormControl, Box, Dialog, DialogTitle, 
    IconButton, Divider, DialogContent, TextField, DialogActions,
    Button
} from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import CloseIcon from "@mui/icons-material/Close";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";

class PaypalPaymentModal extends Component { 

    handleClose = () => this.props.onClose && this.props.onClose();

    handleInputChange = (event) => {
        const { name, value } = event.target;
        const dataKey = event.target.getAttribute("data-key");

        const errors = { ...this.props.errors };
        if (name === "paypal" && dataKey === "clientId" && value) {
            errors.paypalCI = false;
        } else if (name === "paypal" && dataKey === "secretKey" && value) {
            errors.paypalSK = false;
        }

        this.props.setState(prevState => ({
            ...prevState,
            paymentGateways: {
                ...prevState.paymentGateways,
                [name]: {
                    ...prevState.paymentGateways[name],
                    [dataKey]: value,
                },
            },
            errors,
        }));
    };


    render() {

        const { theme, open, state, errors, loading, SavePaymentSettings } = this.props;

        return (
            <>
                <ThemeProvider theme={theme}>
                    <Dialog onClose={this.handleClose} open={open} fullWidth maxWidth={"sm"} sx={{height:"80%", padding:"4% 0%"}}>
                        <DialogTitle>
                            {__("Configure Your PayPal Account", "bookify")}
                            <IconButton 
                                onClick={this.handleClose} 
                                sx={{
                                    position: "absolute",
                                    right: 8,
                                    top: 8,
                                    color: (theme) => theme.palette.grey[500],
                                    "&:hover": {
                                        backgroundColor: "#DDEEEE",
                                    },
                                }}
                            >
                                <CloseIcon sx={{fontSize:"1rem"}} />
                            </IconButton>
                        </DialogTitle>

                        <Divider sx={{borderColor:"#DDEEEE"}} />

                        <DialogContent>
                            <Box sx={{pb:"30px"}}>
                                <Typography sx={{fontSize:"0.875rem", pb:"5px"}}>{__("Please read the documentation for step by step guide to know how you can get api credentials from PayPal Account","bookify")}</Typography>
                                <Button endIcon={<OpenInNewIcon />} component={"a"}
                                    href={"https://wpbookify.com/documentation/settings/payment-settings/"}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    sx={{
                                        p:"0px",
                                        textTransform: "capitalize",
                                        color: "#036666",
                                        "& .MuiButton-endIcon": {
                                            "& > *:nth-of-type(1)": {
                                                fontSize: "18px",
                                            },
                                        },
                                        "&:hover": {
                                            backgroundColor: "transparent",
                                            boxShadow: "none",
                                            color: "#036666",
                                        },
                                        "&:focus": {
                                            boxShadow: "none",
                                            color: "#036666",
                                        }
                                    }}
                                >
                                    {__("Read Documentation","bookify")}
                                </Button>
                            </Box>
                            <Box component="form">
                                <Grid container spacing={4} direction="column">
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="paypal-ci">
                                                {__("PayPal Client ID ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <TextField 
                                                id="paypal-ci"
                                                required
                                                error={errors.paypalCI}
                                                type="text"
                                                name="paypal" 
                                                value={state.paymentGateways?.paypal?.clientId || ""}
                                                onChange={this.handleInputChange}
                                                inputProps={{
                                                    "data-key": "clientId"
                                                }}
                                                sx={{
                                                    border: "1px solid #BFD4D4",
                                                    height: "43px",
                                                    borderRadius: "5px",
                                                    justifyContent: "center",
                                                    marginTop: "5px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "& .MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        height: "43px",
                                                        border: "1px solid",
                                                        borderColor: errors.paypalCI ? "error.main" : "#BFD4D4",
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        padding: "0px 14px"
                                                    }
                                                }}
                                            />
                                        </FormControl>
                                    </Grid>
                                    <Grid item>
                                        <FormControl fullWidth>
                                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="paypal-sk">
                                                {__("PayPal Secret Key ", "bookify")}
                                                <span style={{color:"#A61616"}}>*</span>
                                            </Typography>
                                            <TextField 
                                                id="paypal-sk"
                                                required
                                                error={errors.paypalSK}
                                                type="text"
                                                name="paypal" 
                                                value={state.paymentGateways?.paypal?.secretKey || ""}
                                                onChange={this.handleInputChange}
                                                inputProps={{
                                                    "data-key": "secretKey"
                                                }}
                                                sx={{
                                                    borderRadius: "5px",
                                                    justifyContent: "center",
                                                    marginTop: "5px",
                                                    "& fieldset": {
                                                        border: "none",
                                                    },
                                                    "& .MuiOutlinedInput-root": {
                                                        mt: "0px",
                                                        height: "43px",
                                                        border: "1px solid",
                                                        borderColor: errors.paypalSK ? "error.main" : "#BFD4D4",
                                                    },
                                                    "& .MuiInputBase-input": {
                                                        padding: "0px 14px"
                                                    }
                                                }}
                                            />
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Box>
                        </DialogContent>

                        <Divider sx={{borderColor:"#DDEEEE"}} />

                        <DialogActions sx={{m:2}}>
                            <Button variant="wpbkCancelbtn" onClick={this.handleClose}>
                                {__("Cancel", "bookify")}
                            </Button>
                            <LoadingButton variant="wpbkThemeModalBtn" onClick={() => SavePaymentSettings({ checkValidation: true, gateway: "paypal" })} loading={loading}>
                                {__("Save Settings", "bookify")}
                            </LoadingButton>
                        </DialogActions>
                    </Dialog>
                </ThemeProvider>
            </>
        )
    }
}

export default PaypalPaymentModal;