import { FC, useState } from "react";
import { Box, Typography } from "@mui/material";
import { People } from "@mui/icons-material";

import { SidebarModal } from "./SidebarModal";

import BackArrowIcon from "@icons/BackArrowIcon";
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 }) => {
  const [openModal, setOpenModal] = useState<boolean>(false);

  const onClose = () => {
    setOpenModal(false);
  };

  return (
    <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
          onClick={() => setOpenModal(true)}
          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>
      <SidebarModal open={openModal} onClose={onClose} />
    </Box>
  );
};