import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Box, Grid, TextField, Typography, FormControl } from "@mui/material";
import { MuiTelInput } from "mui-tel-input";

class CompanyWizard extends Component {
    state = {
        theme: createTheme({
            typography: {
                h2: {
                    fontSize: "1.5rem",
                    fontWeight: "550",
                    lineHeight: "2rem",
                    textTransform: "capitalize",
                    color: "#111827",
                },
                body1: {
                    fontFamily: "Figtree, sans-serif",
                    fontSize: "0.875rem",
                    lineHeight: "1.25rem",
                    color: "#4b5563",
                    marginTop: "4px"
                },
                wpbkThemeLabel: {
                    color: "#111827",
                    fontFamily: "Figtree, sans-serif",
                    fontSize: "0.875rem",
                    fontWeight: "500",
                    lineHeight: "1.25rem",
                }
            },
            components: {
                MuiTextField: {
                    styleOverrides: {
                        root: {
                            border: "1px solid #BFD4D4",
                            height: "43px",
                            borderRadius: "5px",
                            justifyContent: "center",
                            marginTop: "5px",
                            "& fieldset": {
                                border: "none",
                            },
                            "& .MuiOutlinedInput-root": {
                                mt: "0px",
                            },
                            "& .MuiInputBase-input": {
                                padding: "0px 14px 4px"
                            }
                        }
                    }
                },
                MuiButton: {
                    variants: [
                        {
                            props: { variant: "wpbkThemeBtn" },
                            style: {
                                borderColor: "none",
                                backgroundColor: "#036666",
                                color: "#FFFFFF",
                                textTransform: "capitalize",
                                padding: "16px 0px",
                                width: "13em",
                                height: "45px",
                                "&:hover": {
                                    backgroundColor: "#025151",
                                    color: "#FFFFFF"
                                },
                                "&.Mui-disabled": {
                                    color: "#FFFFFF",
                                    opacity: 0.7,
                                },
                                "& .MuiLoadingButton-loadingIndicator": {
                                    color: "#FFFFFF",
                                }
                            },
                        },
                    ],
                },
            },
        }),
    };

    openMedia = () => {
        const { state, setState } = this.props;

        if (state.mediaFrame) {
            state.mediaFrame.on('open', () => {
                const mediaModal = document.querySelector('.media-modal');
                if (mediaModal) {
                    mediaModal.style.zIndex = '1000001';
                }
            });
            state.mediaFrame.open();
            return;
        }
        
        const frame = wp.media({
            title: "Select or Upload Company Image",
            button: { text: "Upload" },
            multiple: false,
        });
        
        frame.on("select", () => {
            const attachment = frame.state().get("selection").first().toJSON();
            setState(prevState => ({
                company: {
                    ...prevState.company,
                    "image": attachment.url,
                }
            }));
        });
        
        frame.on('open', () => {
            const mediaModal = document.querySelector('.media-modal');
            if (mediaModal) {
                mediaModal.style.zIndex = '1000001';
            }
        });
        
        frame.open();
        setState(prevState => ({
            ...prevState,
            mediaFrame: frame
        }));
    };

    handleAllInputChange = (event) => {
        const { setState } = this.props;
        const { name, value } = event.target;
        setState(prevState => ({
            company: {
                ...prevState.company,
                [name]: value,
            }
        }));
    }

    handlePhoneChange = (newphone) => {
        const { setState } = this.props;
        setState(prevState => ({
            company: {
                ...prevState.company,
                "phoneNumber": newphone,
            }
        }));
    };
    
    render() {
        const { state } = this.props;
        const { theme } = this.state;

        return (
            <ThemeProvider theme={theme}>
                <Box component="div" sx={{mb:"2em"}}>
                    <Typography variant="h2">
                        {__("Company", "bookify")}
                    </Typography>
                    <Typography variant="body1">
                        {__("Setup Your Company Profile", "bookify")}
                    </Typography>
                </Box>

                <Grid container alignItems="center" spacing={2} sx={{mb:4}}>
                    <Grid item>
                        <Box
                            onClick={this.openMedia}
                            sx={{
                                width: "120px",
                                height: "120px",
                                border: "2px dashed #d1d5db",
                                borderRadius: 2,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                cursor: "pointer",
                                transition: "border-color 0.2s",
                                "&:hover": { borderColor: "#9ca3af" }
                            }}
                        >
                            {state.company.image ? (
                                <Box 
                                    component="img" 
                                    src={state.company.image} 
                                    alt="logo" 
                                    sx={{ 
                                        maxWidth: "100%", 
                                        maxHeight: "100%", 
                                        objectFit: "contain" 
                                    }} 
                                />
                            ) : (
                                <Typography 
                                    sx={{ 
                                        color: "#9ca3af", 
                                        textAlign: "center", 
                                        px: 2, 
                                        fontSize: "0.875rem",
                                        fontFamily: "Figtree, sans-serif"
                                    }}
                                >
                                    {__("Click here to upload image", "bookify")}
                                </Typography>
                            )}
                        </Box>
                    </Grid>
                    <Grid item>
                        <Typography sx={{color:"#4b5563", fontSize:"0.875rem", fontFamily:"Figtree, sans-serif", whiteSpace:"pre-line"}}>
                            {__("120 x 120 pixels and not more than 1 mb. \n JPEG, PNG, or SVG format is accepted.", "bookify")}
                        </Typography>
                    </Grid>
                </Grid>

                <Box component="form">
                    <Grid container spacing={3} sx={{ mb: 4 }}>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="companyName">
                                    {__("Company Name", "bookify")}
                                </Typography>
                                <TextField
                                    placeholder={__("Enter the Company Name", "bookify")}
                                    value={state.company.companyName}
                                    name="companyName"
                                    id="companyName"
                                    onChange={this.handleAllInputChange}
                                />
                            </FormControl>
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="phoneNumber">
                                    {__("Phone Number", "bookify")}
                                </Typography>
                                <MuiTelInput
                                    fullWidth
                                    defaultCountry="US"
                                    value={state.company.phoneNumber}
                                    name="phoneNumber"
                                    id="phoneNumber"
                                    onChange={this.handlePhoneChange}
                                    sx={{
                                        border: "1px solid #BFD4D4",
                                        height: "43px",
                                        borderRadius: "4px",
                                        justifyContent: "center",
                                        marginTop: "5px",
                                        "& 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",
                                            padding: "0px"
                                        },
                                        "& .MuiOutlinedInput-root": {
                                            pl: "8px",
                                            mt: "0px"
                                        },
                                        "& fieldset": {
                                            border: "none",
                                        },
                                    }}
                                />
                            </FormControl>
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="address">
                                    {__("Address", "bookify")}
                                </Typography>
                                <TextField
                                    fullWidth
                                    placeholder={__("Enter the Full Address", "bookify")}
                                    value={state.company.address}
                                    name="address"
                                    id="address"
                                    onChange={this.handleAllInputChange}
                                />
                            </FormControl>
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <Typography variant="wpbkThemeLabel" component="label" htmlFor="website">
                                    {__("Website", "bookify")}
                                </Typography>
                                <TextField
                                    fullWidth
                                    placeholder="https://"
                                    value={state.company.website}
                                    name="website"
                                    id="website"
                                    onChange={this.handleAllInputChange}
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                </Box>
            </ThemeProvider>
        );
    }
}

export default CompanyWizard;