import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { Divider, List, ListItem, ListItemButton, ListItemText, Paper, Stack } from "@mui/material";
import { LoadingPlaceholder } from "@/core/ui/LoadingWidget/LoadingWidget";
import { WgerContainerRightSidebar } from "@/core/ui/Widgets/Container";
import { OverviewEmpty } from "@/core/ui/Widgets/OverviewEmpty";
import { NutritionalPlan } from "@/components/Nutrition/models/nutritionalPlan";
import { useFetchNutritionalPlansQuery } from "@/components/Nutrition/queries";
import { AddNutritionalPlanFab } from "@/components/Nutrition/widgets/Fab";
import React from "react";
import { useTranslation } from "react-i18next";
import { dateToLocale } from "@/core/lib/date";
import { makeLink, WgerLink } from "@/core/lib/url";

export const PlansOverview = () => {
    const plansQuery = useFetchNutritionalPlansQuery();
    const [t] = useTranslation();


    return plansQuery.isLoading
        ? <LoadingPlaceholder />
        : <WgerContainerRightSidebar
            title={t("nutrition.plans")}
            mainContent={<Stack spacing={2}>
                {plansQuery.data?.length === 0 && <OverviewEmpty />}
                <PlanList plans={plansQuery.data!} />
            </Stack>
            }
            fab={<AddNutritionalPlanFab />}
        />;
};


const PlanListItem = (props: { plan: NutritionalPlan }) => {
    const [t, i18n] = useTranslation();
    const detailUrl = makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! });

    return <>
        <ListItem sx={{ p: 0 }}>
            <ListItemButton component="a" href={detailUrl}>
                <ListItemText
                    primary={props.plan.description !== '' ? props.plan.description : t('nutrition.plan')}
                    secondary={
                        props.plan.end
                            ? `${dateToLocale(props.plan.start)} – ${dateToLocale(props.plan.end)}`
                            : `${dateToLocale(props.plan.start)}`
                    }
                />
                <ChevronRightIcon />
            </ListItemButton>
        </ListItem>
        <Divider component="li" />
    </>;
};

const PlanList = (props: { plans: NutritionalPlan[] }) => {

    return <Paper>
        <List sx={{ py: 0 }} key={'abc'}>
            {props.plans.map((plan) => <PlanListItem plan={plan} key={plan.id} />)}
        </List>
    </Paper>;
};