"use client";

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

const ServicesList = () => {
    const dispatch = useAppDispatch();
    const services = useMemo(
        () =>
            Object.entries(SERVICES)
                .filter(([key]) => key !== ServiceCode.UNDEFINED)
                .map(([, value]) => value),
        [SERVICES]
    );

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

    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, i))}
            <TitleWithLines title="Скоро будет" />
            {getServiceInDevelopment("Analytics")}
        </Stack>
    );
};

export default ServicesList;