import { Box, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { YandexButton } from "../IntegrationYandex/YandexButton";
import YandexModal from "../IntegrationYandex/YandexModal";

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

type PartnersBoardProps = {
  partners: Partner[];
  setIsModalOpen: (value: boolean) => void;
  setCompanyName: (value: string) => void;
  isModalOpen: boolean;
  handleCloseModal: () => void;
};

export const PartnersBoard: FC<PartnersBoardProps> = ({
  partners,
  setIsModalOpen,
  isModalOpen,
  handleCloseModal,
  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>*/}
      {/*))}*/}
      <Typography
        variant="h6"
        sx={{
          textAlign: { xs: "center", sm: "start", md: "start" },
          lineHeight: "1",
          marginBottom: "12px",
        }}
      >
        Аналитика
      </Typography>
      <YandexButton setIsModalOpen={setIsModalOpen} />
      <YandexModal
        isModalOpen={isModalOpen}
        handleCloseModal={handleCloseModal}
      />
    </Box>
  );
};