import React, { useState } from "react";
import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
import { SiJavascript } from "react-icons/si";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import SkillPaper from "./SkillPaper.jsx";
import PhotoHover from "./PhotoHover.jsx";

const Carousel = React.lazy(() => import("react-material-ui-carousel"));
export default function Skills() {
  const [image, setImage] = useState();
  const [open, setOpen] = useState(false);

  function openPhoto(image) {
    setImage(image);
    setOpen(true);
  }

  const bottegaCertClick = () => openPhoto("/portfolio/bottega-cert.png");
  const testoutCertClick = () => openPhoto("/portfolio/linux-cert.png");

  const skills = [
    <SkillPaper
      openPhoto={openPhoto}
      src="/portfolio/iq/python.png"
      fgColor="white"
      bgColor="#3f7ed4"
      heading="Python"
      Icon={FaPython}
    />,
    <SkillPaper
      openPhoto={openPhoto}
      src="/portfolio/iq/react.png"
      fgColor="black"
      bgColor="#61dafb"
      heading="React"
      Icon={FaReact}
    />,
    <SkillPaper
      openPhoto={openPhoto}
      src="/portfolio/iq/java.png"
      fgColor="white"
      bgColor="#ea8c10 "
      heading="Java"
      Icon={FaJava}
    />,
    <SkillPaper
      openPhoto={openPhoto}
      src="/portfolio/iq/javascript.png"
      fgColor="black"
      bgColor="#edd43a"
      heading="Javascript"
      Icon={SiJavascript}
    />,
    <SkillPaper
      openPhoto={openPhoto}
      src="/portfolio/iq/html.png"
      fgColor="white"
      bgColor="#e9562f"
      heading="HTML 5"
      Icon={FaHtml5}
    />,
  ];

  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="achievements">
      <PhotoHover
        image={image}
        open={open}
        setOpen={setOpen}
        alt={"Certificate"}
      />
      <Box
        style={{
          display: "flex",
          flex: 1,
          margin: "auto",
          flexWrap: "wrap",
        }}
      >
        <Box style={{ flex: 1 }}>
          <div style={{ display: "flex" }}>
            <h3 style={{ fontSize: 20, margin: "2rem auto" }}>
              Certifications
            </h3>
          </div>
          <Box
            style={{
              flex: 1,
              textAlign: "left",
              display: "flex",
              flexGrow: 1,
              flexWrap: "wrap",
              justifyContent: "center",
            }}
          >
            <Card
              sx={{
                maxWidth: 374,
                margin: "10px auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
              }}
            >
              <CardMedia
                sx={{ minHeight: 320, maxWidth: 374 }}
                image="/portfolio/bottega-cert.png"
                title="Fullstack Development Certificate"
                onClick={bottegaCertClick}
              />
              <CardContent sx={{ color: "white", backgroundColor: "#1d9246" }}>
                <Typography gutterBottom variant="h5" component="div">
                  Fullstack Certification
                </Typography>
                <Typography variant="body2">
                  Certificate of profeciency in Python3, React, CSS, and
                  Javascript
                </Typography>
              </CardContent>
            </Card>
            <Card
              sx={{
                maxWidth: 374,
                margin: "10px auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
              }}
            >
              <CardMedia
                sx={{ minHeight: 320, maxWidth: 374 }}
                image="/portfolio/linux-cert.png"
                title="Linux Client Administration Certificate"
                onClick={testoutCertClick}
              />
              <CardContent
                sx={{
                  color: "white",
                  backgroundColor: "#c3802b",
                }}
              >
                <Typography gutterBottom variant="h5" component="div">
                  Linux Administration Certificate
                </Typography>
                <Typography variant="body2">
                  Certificate of profeciency in Linux client administration
                </Typography>
              </CardContent>
            </Card>
          </Box>
        </Box>
      </Box>
      <Box
        style={{
          display: "flex",
          flex: 1,
          margin: "auto",
          flexWrap: "wrap",
        }}
      >
        <Box style={{ flex: 1, textAlign: "left" }}>
          <div style={{ display: "flex", paddingTop: 30 }}>
            <h3 style={{ fontSize: 20, margin: "2rem auto" }}>
              Pluralsight Scores
            </h3>
          </div>
          <Box sx={{ display: "block" }}>
            <Box
              sx={{
                maxWidth: 374,
                display: "block",
                margin: "auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
              }}
            >
              <Carousel
                interval={8000}
                navButtonsAlwaysVisible
                indicatorContainerProps={{ style: { display: "none" } }}
              >
                {skills.map((skill, i) => (
                  <React.Fragment key={skill}>{skill}</React.Fragment>
                ))}
              </Carousel>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}
