import React, { useEffect, useState } from "react";
import {
  Textlink,
  FooterCol,
  CopyrightTxt,
  SocialIcons,
  useStyles,
  ContainerHome,
  Overlay,
  FooterSubscribe,
  ButtonSearch,
} from "./style";
import { Box, Grid, IconButton, Typography } from "@mui/material";
import { Link } from "@mui/material";
import FacebookIcon from "@mui/icons-material/Facebook";
import InstagramIcon from "@mui/icons-material/Instagram";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { apiClient } from "../common";
import { styled } from "@mui/material/styles";
import Toolbar from "@mui/material/Toolbar";
import InputBase from "@mui/material/InputBase";
import { CDN_URL, retargettingGlobalmarket } from "@/utils/constantImages";
import Image from "next/image";
import { API_CDN_URL } from "@/utils/staticValues";

const Search = styled("div")(({ theme }) => ({
  position: "relative",
  borderRadius: theme.shape.borderRadius,
  margin: "0",
  "@media screen and (max-width:767px)": {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: "9px",
  },

  marginLeft: 0,
  width: "100%",
  [theme.breakpoints.up("sm")]: {
    width: "auto",
    // marginTop: 10,
  },
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: "inherit",
  "& .MuiInputBase-input": {
    transition: theme.transitions.create("width"),
    background: "#fff",
    borderRadius: "10px",
    width: "170px",
    padding: "6px",
    [theme.breakpoints.up("sm")]: {
      width: "190px",
      paddingLeft: "16px",
      marginTop: "0",
      "&:focus": {
        width: "20ch",
      },
    },
  },
}));
const FooterPage = () => {
  const { classes } = useStyles();
  const [load, setLoader] = useState<boolean>(false);
  const [footerOptions, setFooterOptions] = useState<any>([]);
  const [render, setRender] = useState<any>(false);

  useEffect(() => {
    setRender(true);
  }, []);
  useEffect(() => {
    setLoader(true);
    FetchFooterOptions();
  }, []);

  const FetchFooterOptions = async () => {

    try{
         const res = await fetch (`${API_CDN_URL}/cache/getMenuList11.json`);
    const data = await res.json();
      setFooterOptions(data.data);
    } catch {
        let response = await apiClient("website_menu/getMenus_items/11", "get");
    if (response.status == 200) {
      setFooterOptions(response.data);
    }
    } 
  };

  return (
    <ContainerHome className="footermargin">
      {render && (
        <>
          <Overlay></Overlay>
          <Grid container spacing={2} className="bgimage">
            <Grid item xs={12} sm={6} md={3} lg={3}>
              <FooterCol>
                <Image
                  src={retargettingGlobalmarket?.footerlogo}
                  className="footerlogoic"
                  alt="footer-logo"
                  height={48}
                  width={243}
                />
                <Typography>
                  Our company's founders & CEO are electrical and mechanical
                  engineers and businessman
                </Typography>
                <Typography className="mailinfo">
                  <Link href="#" underline="hover">
                    {load && (
                      <Textlink href="mailto:info@powercozmo.com">
                        info@powercozmo.com
                      </Textlink>
                    )}
                  </Link>
                </Typography>
                <FooterCol>
                  <SocialIcons display="flex">
                    <IconButton aria-label="Button">
                      <Link
                        href="https://www.facebook.com/powercozmo.epg"
                        target="_blank"
                      >
                        <FacebookIcon></FacebookIcon>
                      </Link>
                    </IconButton>
                    <IconButton
                      aria-label="Button"
                      href="https://twitter.com/powercozmo"
                      target="_blank"
                    >
                      <i
                        className="icon-x-social"
                        style={{
                          fontSize: "12px",
                        }}
                      ></i>
                    </IconButton>
                    <IconButton aria-label="Button">
                      <Link
                        href="https://www.linkedin.com/company/powercozmo"
                        target="_blank"
                      >
                        <LinkedInIcon></LinkedInIcon>
                      </Link>
                    </IconButton>
                    <IconButton aria-label="Button">
                      <Link
                        href="https://www.instagram.com/powercozmo/"
                        target="_blank"
                      >
                        <InstagramIcon></InstagramIcon>
                      </Link>
                    </IconButton>
                  </SocialIcons>
                </FooterCol>
              </FooterCol>
            </Grid>
            <Grid item xs={12} sm={6} md={3} lg={3}>
              <FooterCol>
                <Typography variant="h5" className={classes.footerlinks}>
                  Quick Link
                </Typography>
                <Box className={classes.borderr}></Box>
                <Typography>
                  <Textlink href="/about-us">About Us</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="/our-products">Our Products</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="/contact-us">Contact Us</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="/blog">Blog</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="/faq">FAQ's</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="/privacy-policy">Privacy Policy</Textlink>
                </Typography>
                <Typography>
                  <Textlink href="privacy-policy/use-data-deletion">User data deletion instructions</Textlink>
                </Typography>
              </FooterCol>
            </Grid>
            <Grid item xs={12} sm={6} md={2.5} lg={2.5}>
              <FooterCol>
                <Typography variant="h5" className={classes.footerlinks}>
                  Main Products
                </Typography>
                <Box className={classes.borderr}></Box>
                {footerOptions.map((v) => (
                  <Typography key={v.id}>
                    <Textlink href={v.link}>{v.label}</Textlink>
                  </Typography>
                ))}
              </FooterCol>
            </Grid>
            <Grid item xs={12} sm={6} md={3.5} lg={3.5}>
              <FooterCol>
                <Typography variant="h5" className={classes.footerlinks}>
                  Subscribe
                </Typography>
                <FooterSubscribe>
                  <Toolbar sx={{ padding: 0, minHeight: "auto" }}>
                    <Search>
                      <StyledInputBase
                        placeholder="Enter Email"
                        inputProps={{ "aria-label": "search" }}
                      />
                      <ButtonSearch variant="contained">Submit</ButtonSearch>
                    </Search>
                  </Toolbar>
                </FooterSubscribe>
              </FooterCol>
            </Grid>
          </Grid>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <CopyrightTxt>
                <Typography className={classes.footertxt}>
                  © 2025 Power Cozmo - All rights reserved.
                </Typography>
              </CopyrightTxt>
            </Grid>
          </Grid>
        </>
      )}
    </ContainerHome>
  );
};
export default FooterPage;