import BackArrowIcon from "@icons/BackArrowIcon";
import { People } from "@mui/icons-material";
import { Box, Typography } from "@mui/material";
import { FC } from "react";
import { ChartLineUp } from "./icons/ChartLineUp";
import { ReturnTime } from "./icons/ReturnTime";
import { Question } from "./icons/Question";
import { Settings } from "./icons/Settings";
import { Pencil } from "./icons/Pencil";
import { ArrowDown } from "./icons/ArrowDown";

interface Iprops {
  open: boolean;
  changePage: (step: number) => void;
}

const quizSetupSteps = [
  { sidebarIcon: <Pencil style={{ color: "#974BFA", fontSize: "24px" }} /> },
  { sidebarIcon: <People style={{ color: "#974BFA", fontSize: "24px" }} /> },
  {
    sidebarIcon: <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />,
  },
  {
    sidebarIcon: <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />,
  },
  { sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
] as const;

export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => (
  <Box
    sx={{
      display: open ? "block" : "none",
      minHeight: "134px",
      padding: "20px 16px 16px 16px",
      background: "#333647",
      borderTop: "1px solid  #9A9AAF",
      borderBottomLeftRadius: "8px",
      borderBottomRightRadius: "8px",
      transitionDuration: "200ms",
    }}
  >
    <Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
      <BackArrowIcon color="white" />

      <Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
        <Box>
          <Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
            Название
          </Typography>
          <Typography
            sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}
          >
            Название проекта
          </Typography>
        </Box>
        <Pencil
          style={{
            position: "absolute",
            right: "0",
            color: "white",
            fontSize: "24px",
          }}
        />
      </Box>
    </Box>
    <Box
      sx={{
        width: "100%",
        justifyContent: "center",
        display: "flex",
        marginTop: "20px",
        flexWrap: "wrap",
        gap: "5px",
      }}
    >
      {quizSetupSteps.map(({ sidebarIcon }, index) => (
        <Box
          onClick={() => changePage(index)}
          sx={{
            cursor: "pointer",
            width: "44px",
            height: "44px",
            background: "#262835",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            borderRadius: "8px",
          }}
        >
          {sidebarIcon}
        </Box>
      ))}

      <Box
        sx={{
          px: "10px",
          width: "70px",
          height: "44px",
          background: "#262835",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          borderRadius: "8px",
          border: "1px solid #FFFFFF66",
          marginLeft: "28px",
        }}
      >
        <Settings
          style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }}
        />
        <ArrowDown style={{ color: "#F2F3F7" }} />
      </Box>
    </Box>
  </Box>
);