"use client";

import { useMemo } from "react";
import { redirect } from "next/navigation";
import { Button, Stack, Title } from "@mantine/core";
import styles from "@/app/services/components/ServicesList/ServicesList.module.css";
import TitleWithLines from "@/components/ui/TitleWithLines/TitleWithLines";
import SCOPES from "@/constants/scopes";
import { Scopes } from "@/enums/Scopes";
import { setTargetService } from "@/lib/store/features/targetService/targetServiceSlice";
import { useAppDispatch } from "@/lib/store/store";

type ServiceData = {
    id: number;
    code: Scopes;
    name: string;
};
const ServicesList = () => {
    const dispatch = useAppDispatch();
    const services = useMemo(
        () =>
            Object.entries(SCOPES)
                .filter(([key]) => key !== Scopes.UNDEFINED)
                .map(([, value]) => value),
        [SCOPES]
    );

    const onServiceClick = (service: ServiceData) => {
        dispatch(setTargetService(service.code));
        redirect("consent");
    };

    const getServiceButton = (service: ServiceData, key: number) => {
        return (
            <Button
                key={key}
                size={"xl"}
                onClick={() => onServiceClick(service)}>
                <Stack gap={0}>
                    <Title order={4}>{service.name}</Title>
                </Stack>
            </Button>
        );
    };

    const getServiceInDevelopment = (title: string) => {
        return (
            <Button
                size={"xl"}
                onClick={() => {}}
                disabled>
                <Stack gap={0}>
                    <Title order={4}>{title}</Title>
                </Stack>
            </Button>
        );
    };

    return (
        <Stack
            className={styles.container}
            gap={"lg"}>
            {services.map((service, i) =>
                getServiceButton(service as unknown as ServiceData, i)
            )}
            <TitleWithLines title="Скоро будет" />
            {getServiceInDevelopment("Analytics")}
        </Stack>
    );
};

export default ServicesList;
