"use client";

import { RefObject, useMemo, useRef } from "react";
import { IconList, IconTag } from "@tabler/icons-react";
import { SimpleGrid, Stack } from "@mantine/core";
import Action from "@/app/actions/components/Action/Action";
import mobileButtonsData from "@/app/actions/data/mobileButtonsData";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import BuiltInLinkData from "@/types/BuiltInLinkData";

const PageBody = () => {
    const { selectedProject, setSelectedProjectId, projects, modulesSet } =
        useProjectsContext();

    const filteredMobileButtonsData = useMemo(
        () =>
            mobileButtonsData.filter(
                link => !link.moduleName || modulesSet.has(link.moduleName)
            ),
        [modulesSet]
    );

    const commonActionsData: RefObject<BuiltInLinkData[]> = useRef([
        {
            icon: IconList,
            label: "Атрибуты",
            href: "/attributes",
        },
        {
            icon: IconTag,
            label: "Теги",
            href: "/tags",
        },
    ]);

    return (
        <PageBlock fullScreenMobile>
            <Stack p={"xs"}>
                <ProjectSelect
                    onChange={project =>
                        setSelectedProjectId(project?.id ?? null)
                    }
                    value={selectedProject}
                    data={projects}
                />
                <SimpleGrid
                    type={"container"}
                    cols={2}>
                    {[
                        ...commonActionsData.current,
                        ...filteredMobileButtonsData,
                    ].map((data, index) => (
                        <Action
                            linkData={data}
                            key={index}
                        />
                    ))}
                </SimpleGrid>
            </Stack>
        </PageBlock>
    );
};

export default PageBody;
