import React from "react"

import Grid from "@mui/material/Grid"
import Box from "@mui/material/Box"
import Container from "@mui/material/Container"
import Typography from "@mui/material/Typography"
import { makeStyles } from "@material-ui/core"
import Link from "@mui/material/Link"
import List from "@mui/material/List"
import ListItem from "@mui/material/ListItem"
import ListItemText from "@mui/material/ListItemText"

import ContactForm from "./ContactForm"
import ContactButton from "./ContactButton"

import { FooterContainer, NavLinkFooter } from "../assets/styles/styled"
import myTheme from "../assets/styles/myTheme"

const myPalette = myTheme.palette

const useStyles = makeStyles((theme) => ({
  title: {
    color: myPalette.primary.contrastText,
    fontWeight: "700",
    textTransform: "uppercase",
    letterSpacing: "2px",
    textAlign: "center",
  },
  list: {
    color: myPalette.primary.contrastText,
    [theme.breakpoints.down("md")]: {
      textAlign: "center",
    },
  },
  listItem: {
    [theme.breakpoints.down("md")]: {
      textAlign: "center",
    },
  },
}))

function Footer() {
  const classes = useStyles()

  return (
    <FooterContainer bg={myPalette.secondary.dark}>
      <Box>
        <Container>
          <Grid container spacing={5}>
            <Grid item xs={12} sm={12} md={3}>LOGO</Grid>
            <Grid item xs={12} sm={12} md={3}>
              <Typography component="h5" className={classes.title}>
                Contáctanos
              </Typography>
              <ContactForm borderColor={myPalette.primary.main} textColor={myPalette.primary.contrastText}/>
            </Grid>
            <Grid item xs={12} sm={12} md={3}>
              <Typography component="h5" className={classes.title}>
                Sobre nosotros
              </Typography>
              <List dense className={classes.list}>
                <ListItem>
                  <ListItemText>
                    <Typography component="p">
                      Dirección
                    </Typography>
                  </ListItemText>
                </ListItem>
                <ListItem>
                  <ListItemText>
                    <Typography component="p">
                      +51 123456789
                    </Typography>
                  </ListItemText>
                </ListItem>
                <ListItem>
                  <ListItemText>
                    <Typography component="p">
                      email@gmail.com
                    </Typography>
                  </ListItemText>
                </ListItem>
              </List>
            </Grid>
            <Grid item xs={12} sm={12} md={3}>
              <Typography component="h5" className={classes.title}>
                Sitio
              </Typography>
              <List dense className={classes.list}>
                <ListItem>
                  <ListItemText>
                    <Typography>
                      <NavLinkFooter href="#">Productos</NavLinkFooter>
                    </Typography>
                  </ListItemText>
                </ListItem>
                <ListItem>
                  <ListItemText>
                    <Typography>
                      <NavLinkFooter href="#">Testimonios</NavLinkFooter>
                    </Typography>
                  </ListItemText>
                </ListItem>
                <ListItem>
                  <ListItemText>
                    <Typography>
                      <NavLinkFooter href="#">Blog</NavLinkFooter>
                    </Typography>
                  </ListItemText>
                </ListItem>
              </List>
            </Grid>
          </Grid>

          <Typography variant="body2" align="center" color={myPalette.secondary.contrastText} sx={{ py: 2 }}>
            {"Copyright © "}
            <Link color="inherit" href="#">
              Saddlemountain Technologies
            </Link>{" "}
            {new Date().getFullYear()}
            {"."}
          </Typography>
        </Container>
      </Box>
    </FooterContainer>
  )
};

export default Footer
