import { useState } from 'react';
import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
import logoSrc from "../../assets/images/amberlogofooter.png";
import Grid from '@mui/material/Grid2';
import customerService from '../../services/CustomerService';

const Footer = () => {

  const [email, setEmail] = useState("")

  return (
    <Box
      sx={{
        backgroundColor: 'background.default',
        mb: 10,
        mt: 15,
        px: {
          xs: 2,
          md: 5,
          lg: 5
        }
      }}
    >
      <img src={logoSrc} alt="Logo"
        style={{
          width: 150,
          height: 23,
          marginBottom: 25
        }}
      />

      <Grid container spacing={2} justifyContent="space-evenly">

        <Grid item size={{ xs: 12, sm: 6, md: 3 }} sx={{ position: "relative" }}>

          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Contact Info
          </Typography>
          <Typography variant="body2" sx={{ mb: 2 }}><span style={{ fontWeight: "bold" }}>Phone:</span> +4 (509) 120 6705</Typography>
          <Typography variant="body2" sx={{ maxWidth: 250 }}><span style={{ fontWeight: "bold" }}>Address:</span> Lot G-77, Wangsa Walk Mall, Wangsa Avenue, No.9, Jalan Wangsa Perdana 1, Bandar Wangsa Maju, 53300 Kuala Lumpur, Malaysia</Typography>
        </Grid>

        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Get Help
          </Typography>
          <nav>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Delivery Information</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Sale Terms & Conditions</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Returns & Refunds</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Privacy Notice</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Shopping FAQs</a>
            </Typography>
          </nav>
        </Grid>

        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Popular Categories
          </Typography>
          <nav>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Dresses <span>(45)</span></a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Tops <span>(45)</span></a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Skirts <span>(45)</span></a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Scarves <span>(45)</span></a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Mens <span>(45)</span></a>
            </Typography>
          </nav>
        </Grid>



        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Let’s stay in touch
          </Typography>
          <Box
            component="form"
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: 1,
            }}
            noValidate
          >
            <TextField
              variant="outlined"
              placeholder="your email address"
              value={email}
              type='email'
              onChange={(e) => { setEmail(e.target.value) }}
              sx={{ p: 0, mb: 2 }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="end">
                    <Button 
                      variant='contained' 
                      sx={{ position: "absolute", right: 0, height: "100%" }}
                      onClick={() => {

                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
                        if (!email || email.trim() === "") {
                          alert("Email is required");
                          return;
                        }
  
                        if (!emailRegex.test(email)) {
                          alert("Invalid Email");
                          return;
                        }
  
                        if(customerService.createCustomer({
                          "email": email,
                          "firstName": email,
                          "lastName": "customer",
                          "password": "securePassword123"
                        })){
  
                          alert(`SUCCESS ADD: ${email}`)
                          setEmail('')
  
                        }else{
                          alert("ALREADY ADDED");
                        }
  
                      }}
                    >
                      Subscribe
                    </Button>
                  </InputAdornment>
                ),
              }}
            />

            <Typography variant="body2" >Keep up to date with our latest  news and <br /> special offers.</Typography>


          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default Footer;
