import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { ThemeProvider } from "@mui/material/styles";
import { 
    TextField, FormControl, Grid, Box, Typography, 
    Avatar, IconButton, Badge, InputLabel, Select,
    MenuItem
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import { MuiTelInput } from "mui-tel-input";
import { ReactComponent as StaffIconPlaceholder } from "../../assets/person-icon-placeholder.svg";

class StaffDetailsForm extends Component {

    state = {
        frame: null
    }

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

    handlePhoneChange = (newPhone) => {
        this.props.onChange("phoneNumber", newPhone);
    };

    handleStaffImage = () => {
        if (this.state.frame) {
            this.state.frame.open();
            return;
        }

        const frame = wp.media({
            title: "Select or Upload Staff Photo",
            button: {
                text: "Upload",
            },
            multiple: false,
        });

        frame.on("select", () => {
            const attachment = frame.state().get("selection").first().toJSON();
            this.props.onChange("image", attachment.url);
        });

        frame.open();
        this.setState({ frame });
    };

    handleRemoveImage= () => {
        this.props.onChange("image", "");
    }

    render() {
        const { theme, formData, errors, staffId, staffRegistered, staffRegisteredId, toggleGcal, toggleOcal, zoomUsers } = this.props;
        const GoogleConnectBtn = window.GoogleConnectBtn;
        const OutlookConnectBtn = window.OutlookConnectBtn;
        const ZoomMeeting = window.ZoomMeeting;

        return (
            <ThemeProvider theme={theme}>
                <Grid container spacing={3}>
                    <Grid item xs={12}>
                        <Box mt={2} textAlign="-webkit-center">
                            {formData.image ? (
                                <Badge
                                    overlap="circular"
                                    anchorOrigin={{ vertical: "top", horizontal: "right" }}
                                    badgeContent={
                                        <IconButton onClick={this.handleRemoveImage} color={"error"}>
                                            <DeleteIcon fontSize="small" />
                                        </IconButton>
                                    }
                                >
                                    <Avatar 
                                        alt="Staff image" 
                                        sx={{
                                            width: "12rem",
                                            height: "12rem",
                                            border:"2px solid #BFD4D4"
                                        }} 
                                        src={formData.image} 
                                        onClick={this.handleStaffImage}
                                    />
                                </Badge>
                            ) : (
                                <Box 
                                    border="2px dashed #BFD4D4" 
                                    textAlign="center" 
                                    sx={{
                                        width: "12rem", 
                                        height: "12rem", 
                                        borderRadius: "50%",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        flexDirection: "column"
                                    }}
                                    onClick={this.handleStaffImage}
                                >   
                                    <StaffIconPlaceholder />
                                    <Typography sx={{p:"15px", color:"#789595"}}>{__("Click here to upload staff image", "bookify")}</Typography>
                                </Box>
                            )}
                        </Box>
                    </Grid>
                    <Grid item xs={12} container spacing={2} justifyContent="space-between">
                        <Grid item sx={{width:"50%"}}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-name">
                                    {__("Full Name ", "bookify")}
                                    <span style={{color:"#A61616"}}>*</span>
                                </Typography>
                                <TextField 
                                    id="staff-name"
                                    required
                                    error={errors.fullName}
                                    type="text" 
                                    name="fullName" 
                                    value={formData.fullName}
                                    onChange={this.handleInputChange}
                                    sx={{
                                        borderRadius: "5px",
                                        justifyContent: "center",
                                        "& fieldset": {
                                            border: "none",
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            mt: "0px",
                                            height: "43px",
                                            border: "1px solid",
                                            borderColor: errors.fullName ? "error.main" : "#BFD4D4",
                                        },
                                        "& .MuiInputBase-input": {
                                            padding: "0px 14px"
                                        }
                                    }}
                                />
                            </FormControl>
                        </Grid>
                        <Grid item sx={{width:"50%"}}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-phone">
                                    {__("Phone Number ", "bookify")}
                                    <span style={{color:"#A61616"}}>*</span>
                                </Typography>
                                <MuiTelInput
                                    id="staff-phone"
                                    required
                                    error={errors.phoneNumber}
                                    inputProps={{ pattern: "[0-9]*" }}
                                    name="phoneNumber"
                                    value={formData.phoneNumber}
                                    onChange={this.handlePhoneChange}
                                    defaultCountry="US"
                                    sx={{
                                        borderRadius: "4px",
                                        justifyContent: "center",
                                        "& input[type=number]::-webkit-outer-spin-button": {
                                            WebkitAppearance: "none",
                                            margin: 0,
                                        },
                                        "& input[type=number]::-webkit-inner-spin-button": {
                                            WebkitAppearance: "none",
                                            margin: 0,
                                        },
                                        "& .MuiInputBase-input": {
                                            pl: "0px"
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            pl: "8px",
                                            height: "43px",
                                            border: "1px solid",
                                            borderColor: errors.phoneNumber ? "error.main" : "#BFD4D4",
                                        },
                                        "& fieldset": {
                                            border: "none",
                                        },
                                    }}
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                    <Grid item xs={12} container spacing={2} justifyContent="space-between">
                        <Grid item sx={{width:"50%"}}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-email">
                                    {__("Email ", "bookify")}
                                    <span style={{color:"#A61616"}}>*</span>
                                </Typography>
                                <TextField
                                    id="staff-email"
                                    required
                                    error={errors.email || errors.emailValidation}
                                    helperText={errors.emailValidation ? __("Please enter a valid email", "bookify") : ""}
                                    type="email"
                                    name="email"
                                    value={formData.email}
                                    onChange={this.handleInputChange}
                                    sx={{
                                        borderRadius: "5px",
                                        justifyContent: "center",
                                        "& fieldset": {
                                            border: "none",
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            mt: "0px",
                                            height: "43px",
                                            border: "1px solid",
                                            borderColor: errors.email ? "error.main" : "#BFD4D4",
                                        },
                                        "& .MuiInputBase-input": {
                                            padding: "0px 14px"
                                        },
                                        "& .MuiFormHelperText-root": {
                                            ml: "0px"
                                        }
                                    }}
                                />
                            </FormControl>
                        </Grid>
                        <Grid item sx={{width:"50%"}}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-password">
                                    {__("Password ", "bookify")}
                                    <span style={{color:"#A61616"}}>*</span>
                                </Typography>
                                <TextField
                                    id="staff-password"
                                    required={staffId ? false : true}
                                    error={staffId ? false : errors.password}
                                    type="password"
                                    name="password"
                                    value={formData.password}
                                    onChange={this.handleInputChange}
                                    sx={{
                                        borderRadius: "5px",
                                        justifyContent: "center",
                                        "& fieldset": {
                                            border: "none",
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            mt: "0px",
                                            height: "43px",
                                            border: "1px solid",
                                            borderColor: errors.password ? "error.main" : "#BFD4D4",
                                        },
                                        "& .MuiInputBase-input": {
                                            padding: "0px 14px"
                                        }
                                    }}
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                    <Grid item xs={12}>
                        <FormControl fullWidth>
                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-profession">
                                {__("Profession", "bookify")}
                            </Typography>
                            <TextField
                                id="staff-profession"
                                type="text" 
                                name="profession" 
                                value={formData.profession}
                                onChange={this.handleInputChange}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    height: "43px",
                                    borderRadius: "5px",
                                    justifyContent: "center",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                    "& .MuiOutlinedInput-root": {
                                        mt: "0px",
                                    },
                                    "& .MuiInputBase-input": {
                                        padding: "0px 14px"
                                    }
                                }}
                            />
                        </FormControl>
                    </Grid>
                    { ZoomMeeting && zoomUsers && zoomUsers.length > 0 && ( staffId ? true : staffRegistered ) ? (
                        <Grid item xs={12}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-zoom-user" >
                                    {__("Zoom User", "bookify")}
                                </Typography>
                                <Select
                                    id="staff-zoom-user" 
                                    name="zoomUserId" 
                                    value={formData.zoomUserId} 
                                    onChange={this.handleInputChange}
                                    sx={{
                                        border: "1px solid #BFD4D4",
                                        height: "45px",
                                        "& fieldset": {
                                            border: "none",
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            mt: "0px",
                                        },
                                    }}
                                >
                                    {zoomUsers.map((user, index) => (
                                        <MenuItem key={index} value={user.id}>
                                            {user.display_name + " (" + user.email + ")"}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>
                    ) : null }
                    <Grid item xs={12}>
                        <FormControl fullWidth>
                            <Typography variant="wpbkThemeLabel" component="label" htmlFor="staff-note">
                                {__("Note", "bookify")}
                            </Typography>
                            <TextField
                                id="staff-note"
                                multiline
                                rows={4}
                                name="note"
                                value={formData.note}
                                onChange={this.handleInputChange}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    borderRadius: "4px",
                                    justifyContent: "center",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                }}
                            />
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sx={{display:"flex", justifyContent:"space-between"}}>
                        { GoogleConnectBtn && toggleGcal && ( staffId ? true : staffRegistered ) ? (
                                <GoogleConnectBtn 
                                    staffId={staffId || staffRegisteredId}
                                    googleConnection={formData.googleConnection}
                                />
                        ) : null}
                        { OutlookConnectBtn && toggleOcal && ( staffId ? true : staffRegistered ) ? (
                                <OutlookConnectBtn 
                                    staffId={staffId || staffRegisteredId}
                                    outlookConnection={formData.outlookConnection}
                                />
                        ) : null}
                    </Grid>
                </Grid>
            </ThemeProvider>
        );
    }
}

export default StaffDetailsForm;