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

class CompanyWizard extends Component {
  constructor(props) {
    super(props);

    const initial = (props.data && props.data.company) ? props.data.company : {};

    const theme = createTheme({
      typography: {
        fontFamily: 'Poppins-Medium, Poppins, sans-serif',
        h3: {
          fontSize: "2em",
          fontWeight: "500",
          textTransform: "capitalize",
          color: "#042626",
        },
        body1: {
          color: "#587373",
          marginTop: "5px"
        },
        wpbkThemeLabel: {
          color: "#042626",
          fontSize: "15px",
          fontWeight: "500",
          paddingBottom: "5px",
        }
      },
      components: {
        MuiOutlinedInput: {
          styleOverrides: {
            root: {
              borderRadius: '5px',
              height: '38px',
              marginTop: '5px',
              '& fieldset': {
                border: 'none',
              },
              '& .MuiInputBase-input': {
                fontSize: '12px',
                padding: '5px 14px 5px',
                border: '1px solid #57b0ee',
                '&:focus': {
                  outline: 0,
                  border: 'none',
                  boxShadow: '0 0 0 1px #57b0ee',
                }
              },
            },
          },
        },
        MuiButton: {
          variants: [
            {
              props: { variant: 'wpbkThemeBtn' },
              style: {
                borderColor: 'none',
                backgroundColor: '#48b6f1',
                color: '#FFFFFF',
                textTransform: 'capitalize',
                padding: '16px 0px',
                width: '13em',
                height: '45px',
                '&:hover': {
                  backgroundColor: '#1976d2',
                  color: '#FFFFFF',
                },
                '&.Mui-disabled': {
                  color: '#FFFFFF',
                  opacity: 0.7,
                },
                '& .MuiLoadingButton-loadingIndicator': {
                  color: '#FFFFFF',
                },
              },
            },
          ],
        },
      },
    });

    this.state = {
      theme,
      apbgf_company_name: initial.apbgf_company_name || '',
      apbgf_company_email: initial.apbgf_company_email || '',
      apbgf_company_number: initial.apbgf_company_number || '',
      apbgf_company_address: initial.apbgf_company_address || '',
      apbgf_company_website_url: initial.apbgf_company_website_url || '',
      errors: {
        apbgf_company_email: false,
      }
    };
  }


  componentDidMount() {
    if (this.props.data?.company) {
      this.setState({ ...this.props.data.company });
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps.data?.company !== this.props.data?.company && this.props.data?.company) {
      this.setState({ ...this.props.data.company });
    }
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value }, () => {
      this.props.saveStep('company', this.state);
    });
  };

  validate = () => {
    const email = (this.state.apbgf_company_email || '').trim();
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
    const hasError = email.length > 0 && !emailPattern.test(email);

    this.setState({
      errors: {
        ...this.state.errors,
        apbgf_company_email: hasError,
      }
    });

    return !hasError;
  };

  render() {
    const { theme, errors } = this.state;
    if (this.props.onValidate) {
      this.props.onValidate(this.validate);
    }
    return (
      <ThemeProvider theme={theme}>
        <Box
          className="apbgf-card"
        >
          <Box component="div" sx={{ mb: "4em" }}>
            <Typography variant="h3">
              {__('Company', 'apbgf')}
            </Typography>
            <Typography variant="body1" sx={{ mt: 1 }}>
              {__('Setup your company profile', 'apbgf')}
            </Typography>
          </Box>

          <Box component="form">
            <Grid container spacing={3} direction="column">
              <Grid item>
                <FormControl fullWidth>
                  <Typography variant="wpbkThemeLabel" component="label">
                    {__('Company Name', 'apbgf')}
                  </Typography>
                  <TextField
                    fullWidth
                    placeholder={__('Enter the Company Name', 'apbgf')}
                    name="apbgf_company_name"
                    value={this.state.apbgf_company_name}
                    onChange={this.handleChange}
                  />
                </FormControl>
              </Grid>

              <Grid item>
                <FormControl fullWidth error={errors.apbgf_company_email}>
                  <Typography variant="wpbkThemeLabel" component="label">
                    {__('Email', 'apbgf')}
                  </Typography>
                  <TextField
                    fullWidth
                    placeholder={__('Enter your email', 'apbgf')}
                    name="apbgf_company_email"
                    type="email"
                    value={this.state.apbgf_company_email}
                    onChange={this.handleChange}
                    error={errors.apbgf_company_email}
                    sx={{
                      '& .MuiInputBase-input': {
                        border: errors.apbgf_company_email ? '1px solid #d32f2f' : '1px solid #57b0ee',
                      }
                    }}
                  />
                  {errors.apbgf_company_email && (
                    <Typography sx={{ color: '#d32f2f', fontSize: '0.75rem', mt: 0.5 }}>
                      {__('Please enter a valid email.', 'apbgf')}
                    </Typography>
                  )}
                </FormControl>
              </Grid>

              <Grid item>
                <FormControl fullWidth>
                  <Typography variant="wpbkThemeLabel" component="label">
                    {__('Phone Number', 'apbgf')}
                  </Typography>
                  <TextField
                    fullWidth
                    placeholder={__('Enter your phone number', 'apbgf')}
                    name="apbgf_company_number"
                    type="tel"
                    value={this.state.apbgf_company_number}
                    onChange={this.handleChange}
                  />
                </FormControl>
              </Grid>

              <Grid item>
                <FormControl fullWidth>
                  <Typography variant="wpbkThemeLabel" component="label">
                    {__('Address', 'apbgf')}
                  </Typography>
                  <TextField
                    fullWidth
                    placeholder={__('Enter the Full Address', 'apbgf')}
                    name="apbgf_company_address"
                    value={this.state.apbgf_company_address}
                    onChange={this.handleChange}
                  />
                </FormControl>
              </Grid>

              <Grid item>
                <FormControl fullWidth>
                  <Typography variant="wpbkThemeLabel" component="label">
                    {__('Website URL', 'apbgf')}
                  </Typography>
                  <TextField
                    fullWidth
                    placeholder={__('https://', 'apbgf')}
                    name="apbgf_company_website_url"
                    value={this.state.apbgf_company_website_url}
                    onChange={this.handleChange}
                  />
                </FormControl>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </ThemeProvider>
    );
  }
}

export default CompanyWizard;