import { Box, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { ServiceButton } from "./ServiceButton/ServiceButton";
import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";

export type Partner = {
  name: string;
  logo?: string;
  category: string;
};

type PartnersBoardProps = {
  partners: Partner[];
  setIsModalOpen: (value: boolean) => void;
  companyName: keyof typeof QuizMetricType | null;
  setCompanyName: (value: keyof typeof QuizMetricType) => void;
  isModalOpen: boolean;
  handleCloseModal: () => void;
};

export const PartnersBoard: FC<PartnersBoardProps> = ({
  partners,
  setIsModalOpen,
  isModalOpen,
  handleCloseModal,
  companyName,
  setCompanyName,
}) => {
  const theme = useTheme();

  // const partnersByCategory = partners.reduce(
  //   (acc, partner) => {
  //     (acc[partner.category] = acc[partner.category] || []).push(partner);
  //     return acc;
  //   },
  //   {} as Record<string, Partner[]>,
  // );

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: { xs: "center", sm: "center", md: "start" },
      }}
    >
      {/*{Object.entries(partnersByCategory).map(([category, partners]) => (*/}
      {/*  <Box key={category}>*/}
      {/*    <Typography*/}
      {/*      variant="h6"*/}
      {/*      sx={{*/}
      {/*        textAlign: { xs: "center", sm: "start", md: "start" },*/}
      {/*        lineHeight: "1",*/}
      {/*        marginBottom: "12px",*/}
      {/*      }}*/}
      {/*    >*/}
      {/*      {category}*/}
      {/*    </Typography>*/}
      {/*    <Box*/}
      {/*      sx={{*/}
      {/*        display: "flex",*/}
      {/*        flexWrap: "wrap",*/}
      {/*        justifyContent: { xs: "center", sm: "start", md: "start" },*/}
      {/*      }}*/}
      {/*    >*/}
      {/*      {partners.map((partner) => (*/}
      {/*        <PartnerItem*/}
      {/*          key={partner.name}*/}
      {/*          partner={partner}*/}
      {/*          setIsModalOpen={setIsModalOpen}*/}
      {/*          setCompanyName={setCompanyName}*/}
      {/*        />*/}
      {/*      ))}*/}

      {/*    </Box>*/}
      {/*  </Box>*/}
      {/*))}*/}

      <Box>
        <Typography
          variant="h6"
          sx={{
            textAlign: { xs: "start", sm: "start", md: "start" },
            lineHeight: "1",
            marginBottom: "12px",
          }}
        >
          Аналитика
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: { xs: "start", sm: "start", md: "start" },
          }}
        >
          <ServiceButton
            logo={<YandexMetricaLogo />}
            setIsModalOpen={setIsModalOpen}
            name={"yandex"}
            setCompanyName={setCompanyName}
          />
          <ServiceButton
            logo={<VKPixelLogo />}
            title={"VK Пиксель"}
            name={"vk"}
            setIsModalOpen={setIsModalOpen}
            setCompanyName={setCompanyName}
          ></ServiceButton>
        </Box>
      </Box>
      {companyName && (
        <AnalyticsModal
          isModalOpen={isModalOpen}
          handleCloseModal={handleCloseModal}
          companyName={companyName}
        />
      )}
    </Box>
  );
};