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 InstagramIcon from '@mui/icons-material/Instagram';
import WhatsAppIcon from '@mui/icons-material/WhatsApp';
import LocalPhoneIcon from '@mui/icons-material/LocalPhone';

import customerService from '../../services/CustomerService';


const TikTokIcon = ({ color = "#000000" }) => {
  return (
    <svg fill={color} width="1.3em" height="1.3em" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" /></svg>
  );
};

const Footer = () => {

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

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

      <Grid container spacing={2} justifyContent="space-between">
        {/* 
        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Company
          </Typography>
          <nav>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>About Us</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Cotact Us</a>
            </Typography>
          </nav>
        </Grid> */}

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

          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Contact Info
          </Typography>
          <Typography variant="body2" sx={{ maxWidth: 350, mb: 2 }}><span style={{ fontWeight: "bold" }}>AMBER MODE (M) SDN BHD (1109469-M) <br /> </span> Lot G-77, Wangsa Walk Mall, <br />Wangsa Avenue, <br />No.9, Jalan Wangsa Perdana 1, <br />Bandar Wangsa Maju, <br />53300 Kuala Lumpur, <br />Malaysia</Typography>
          <Typography
            variant="body2"
            sx={{ display: "flex", alignItems: "center" }}
          >
            <LocalPhoneIcon sx={{ mr: 1 }} />
            +60 17228 2072
          </Typography>


        </Grid>


        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3, xl: 3 }} sx={{ pl: { xs: 0, sm: 0, md: 0, lg: 5, xl: 5 } }}>
          <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: 6, lg: 4, xl: 4 }}>
          <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="Email address"
              value={email}
              type='email'
              onChange={(e) => { setEmail(e.target.value) }}
              sx={{
                p: 0,
                mb: 2,
                overflow: "hidden",
                borderRadius: "4px",
              }}
              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 special offers.</Typography>

            <Box sx={{ display: "flex", gap: 1, justifyContent: "end", cursor: "pointer" }}>
              <a
                href="https://wa.me/+60172282072"
                target="_blank"
                style={{
                  color: "#95AAC5"
                }}><WhatsAppIcon />
              </a>
              <a
                href="https://www.instagram.com/amber.officials/?hl=en"
                target="_blank"
                style={{
                  color: "#95AAC5"
                }}><InstagramIcon />
              </a>
              <a
                href="https://www.tiktok.com/@ambermodeofficial"
                target="_blank"
                style={{
                  color: "#95AAC5"
                }}><TikTokIcon color={"#95AAC5"} />
              </a>

            </Box>

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

export default Footer;
