import { Tabs as MuiTabs } from "@mui/material";
import { CustomTab } from "./CustomTab";
import { TypePages } from "./types";

type TabsProps = {
  names: string[];
  items: string[];
  selectedItem: TypePages;
  setSelectedItem: (num: TypePages) => void;
  toDop: () => void;
};

export const Tabs = ({
  items,
  names,
  selectedItem,
  setSelectedItem,
}: TabsProps) => (
  <MuiTabs
    sx={{ m: "25px" }}
    TabIndicatorProps={{ sx: { display: "none" } }}
    value={selectedItem}
    onChange={(event, newValue: TypePages) => {
      setSelectedItem(newValue);
    }}
    variant="scrollable"
    scrollButtons={false}
  >
    {items.map((item, index) => (
      <CustomTab key={item + index} value={item}
        sx={{
          textUnderlinePosition: "under",
          color:
            selectedItem === "create" && item === "dop" ?
              "#7e2aea"
              :
              selectedItem === "hide" && item === "dop" ?
                "#7e2aea"
                :
                selectedItem === item ? "#7e2aea" : "black",
          textDecoration:
            selectedItem === "create" && item === "dop" ?
              "underline #7e2aea"
              :
              selectedItem === "hide" && item === "dop" ?
                "underline #7e2aea"
                :
                selectedItem === item ? "underline #7e2aea" : "none",
          "&.Mui-selected": {
            textDecoration:
              selectedItem === "create" && item === "dop" ?
                "underline #7e2aea"
                :
                selectedItem === "hide" && item === "dop" ?
                  "underline #7e2aea"
                  :
                  selectedItem === item ? "underline #7e2aea" : "none",
          },
        }}

        label={
          selectedItem === "create" && item === "dop" ?
            "Доп. услуги — Создать квиз на заказ"
            :
            selectedItem === "hide" && item === "dop" ?
              "Доп. услуги — Убрать логотип “PenaQuiz”"
              :
              names[index]
        } />
    ))}
  </MuiTabs>
);
