import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import {
    Alert,
    AlertTitle,
    Box,
    Button,
    ImageListItem,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableRow,
    Typography
} from "@mui/material";
import Grid from '@mui/material/Grid';
import ImageList from "@mui/material/ImageList";
import { LoadingPlaceholder } from "@/core/ui/LoadingWidget/LoadingWidget";
import { FormQueryErrors } from "@/core/ui/Widgets/FormError";
import { StepProps } from "@/components/Exercises/screens/Add/AddExerciseStepper";
import {
    useAddExerciseFullQuery,
    useAddExerciseImageQuery,
    useCategoriesQuery,
    useEquipmentQuery,
    useLanguageQuery,
    useMusclesQuery
} from "@/components/Exercises/queries";
import { useProfileQuery } from "@/components/User";
import Markdown from 'markdown-to-jsx';
import React, { Fragment } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useExerciseSubmissionStateValue } from "@/components/Exercises/screens/Add/state";
import { ENGLISH_LANGUAGE_ID } from "@/core/lib/consts";
import { MarkdownOptions } from "@/core/lib/markdown";
import { makeLink, WgerLink } from "@/core/lib/url";

export const Step6Overview = ({ onBack }: StepProps) => {
    const [t, i18n] = useTranslation();
    const [state] = useExerciseSubmissionStateValue();

    const navigate = useNavigate();
    const categoryQuery = useCategoriesQuery();
    const languageQuery = useLanguageQuery();
    const musclesQuery = useMusclesQuery();
    const equipmentQuery = useEquipmentQuery();
    const profileQuery = useProfileQuery();

    const addExerciseSubmissionMutation = useAddExerciseFullQuery();
    const addImageMutation = useAddExerciseImageQuery();

    const submitExercise = async () => {

        // Create the exercise
        const exerciseId = await addExerciseSubmissionMutation.mutateAsync({
            exercise: {
                categoryId: state.category as number,
                equipmentIds: state.equipment,
                muscleIds: state.muscles,
                secondaryMuscleIds: state.musclesSecondary,
            },
            author: profileQuery.data!.username,
            variationGroup: state.variationGroup,
            variationsConnectTo: state.newVariationExerciseId,
            translations: [
                {
                    language: ENGLISH_LANGUAGE_ID,
                    name: state.nameEn,
                    description: state.descriptionEn,
                    aliases: [
                        ...state.alternativeNamesEn.map(name => ({ alias: name }))
                    ],
                    comments: [
                        ...state.notesEn.map(name => ({ comment: name }))
                    ]
                },
                ...(state.languageId !== null ? [{
                    language: state.languageId,
                    name: state.nameI18n,
                    description: state.descriptionI18n,
                    aliases: [
                        ...state.alternativeNamesI18n.map(name => ({ alias: name }))
                    ],
                    comments: [
                        ...state.notesI18n.map(name => ({ comment: name }))
                    ]
                }] : [])
            ],
        });

        // Post the images individually, it seems to be more reliable this way
        // and most problems were happening when creating the exercise itself
        for (const image of state.images) {
            if (!image.file) {
                continue;
            }
            await addImageMutation.mutateAsync({
                exerciseId: exerciseId,
                image: image.file,
                imageData: image,
            });
        }

    };

    const variationText =
        state.variationGroup !== null
            ? `Using variation group ${state.variationGroup}`
            : state.newVariationExerciseId !== null
                ? `Connecting to exercise ${state.newVariationExerciseId}`
                : '';

    return equipmentQuery.isLoading || languageQuery.isLoading || musclesQuery.isLoading || categoryQuery.isLoading
        ? <LoadingPlaceholder />
        : <>
            <Typography variant={"h6"}>
                {t('exercises.step1HeaderBasics')}
            </Typography>
            <TableContainer>
                <Table>
                    <TableBody>
                        <TableRow>
                            <TableCell>{t('name')}</TableCell>
                            <TableCell>{state.nameEn}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.alternativeNames')}</TableCell>
                            <TableCell>{state.alternativeNamesEn.join(", ")}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('description')}</TableCell>
                            <TableCell>
                                <Markdown options={MarkdownOptions}>
                                    {state.descriptionEn}
                                </Markdown>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.notes')}</TableCell>
                            <TableCell>{state.notesEn.map(note => <Fragment
                                key={note}>{note}<br /></Fragment>)}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('category')}</TableCell>
                            <TableCell>{categoryQuery.data!.find(c => c.id === state.category)!.translatedName}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.equipment')}</TableCell>
                            <TableCell>{state.equipment.map(e => equipmentQuery.data!.find(value => value.id === e)!.translatedName).join(', ')}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.muscles')}</TableCell>
                            <TableCell>{state.muscles.map(m => musclesQuery.data!.find(value => value.id === m)!.getName()).join(', ')}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.secondaryMuscles')}</TableCell>
                            <TableCell>{state.musclesSecondary.map(m => musclesQuery.data!.find(value => value.id === m)!.getName()).join(', ')}</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>{t('exercises.variations')}</TableCell>
                            <TableCell>{variationText}</TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </TableContainer>
            {state.images.length > 0 && (
                <ImageList
                    cols={3}
                    style={{ maxHeight: "200px", }}>
                    {state.images.map(imageEntry => (
                        <ImageListItem key={imageEntry.url}>
                            <img
                                style={{ maxHeight: "200px", maxWidth: "200px" }}
                                src={imageEntry.url}
                                alt=""
                                loading="lazy"
                            />
                        </ImageListItem>
                    ))}
                </ImageList>
            )}


            {state.languageId !== null && (
                <>
                    <Typography variant={"h6"} sx={{ mt: 3 }}>
                        {languageQuery.data!.find(l => l.id === state.languageId)!.nameLong}
                    </Typography>
                    <TableContainer>
                        <Table>
                            <TableBody>
                                <TableRow>
                                    <TableCell>{t('name')}</TableCell>
                                    <TableCell>
                                        {state.nameI18n}
                                    </TableCell>
                                </TableRow>

                                <TableRow>
                                    <TableCell>{t('exercises.alternativeNames')}</TableCell>
                                    <TableCell>{state.alternativeNamesI18n.join(", ")}</TableCell>
                                </TableRow>


                                <TableRow>
                                    <TableCell>{t('description')}</TableCell>
                                    <TableCell>
                                        <Markdown options={MarkdownOptions}>
                                            {state.descriptionI18n}
                                        </Markdown>
                                    </TableCell>
                                </TableRow>


                                <TableRow>
                                    <TableCell>{t('exercises.notes')}</TableCell>
                                    <TableCell>{state.notesI18n.map(note => <Fragment
                                        key={note}>{note}<br /></Fragment>)}</TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </>
            )}

            <Box sx={{ mt: 2 }}>
                {addExerciseSubmissionMutation.isIdle && <Alert severity="info">
                    {t('exercises.checkInformationBeforeSubmitting')}
                </Alert>}

                {addExerciseSubmissionMutation.isSuccess && <Alert severity="success">
                    <AlertTitle>{t('success')}</AlertTitle>
                    {t('exercises.cacheWarning')}
                </Alert>}

                <FormQueryErrors mutationQuery={addExerciseSubmissionMutation} />
            </Box>

            <Grid container>
                <Grid sx={{ display: "flex", justifyContent: "end" }} size={12}>
                    <Box sx={{ mb: 2 }}>
                        <div>
                            {!addExerciseSubmissionMutation.isSuccess &&
                                <Button
                                    onClick={onBack}
                                    sx={{ mt: 1, mr: 1 }}
                                >
                                    {t('goBack')}
                                </Button>
                            }
                            {!addExerciseSubmissionMutation.isSuccess
                                && <Button
                                    variant="contained"
                                    disabled={addExerciseSubmissionMutation.isError || addExerciseSubmissionMutation.isPending}
                                    onClick={submitExercise}
                                    sx={{ mt: 1, mr: 1 }}
                                    color="info"
                                >
                                    {t('exercises.submitExercise')}
                                </Button>
                            }
                            {addExerciseSubmissionMutation.isSuccess
                                && <Button
                                    variant="contained"
                                    onClick={() => navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: addExerciseSubmissionMutation.data! }))}
                                    sx={{ mt: 1, mr: 1 }}
                                    color="success"
                                >
                                    {t('seeDetails')}
                                    <NavigateNextIcon />
                                </Button>
                            }
                        </div>
                    </Box>
                </Grid>
            </Grid>
        </>;
};