import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission";
import { Button, ButtonProps, Theme } from "@material-ui/core";
import { createStyles, makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import React from "react";
import { CommentQuestion } from "mdi-material-ui/index";

export const getColorByStatus = (status: SubmissionStatus, theme: Theme) => {
    switch (status) {
        case "awaiting":
            return theme.palette.info.dark;
        case "accepted":
            return theme.palette.success.dark;
        case "declined":
            return theme.palette.error.dark;
        case "draft":
            return theme.palette.grey["800"];
        default:
            return "textPrimary";
    }
}

export const useStatusStyles = makeStyles((theme: Theme) => {
    const colorByStatusGetter = ({ status }: any) => getColorByStatus(status, theme);

    return createStyles({
        foreground: {
            color: colorByStatusGetter
        },
        background: {
            backgroundColor: colorByStatusGetter
        }
    })
})

export type SubmissionStatusProps = {
    submission: SubmissionState,
}

export const Status = ({ submission } : SubmissionStatusProps) => {
    const status = getSubmissionStatus(submission);
    const classes = useStatusStyles({ status });

    const { t } = useTranslation();

    return <span className={ classes.foreground }>{ t(`submission.status.${ status }`) }</span>;
}

export const ContactAction = (props: ButtonProps) => {
    const { t } = useTranslation();

    return <Button startIcon={ <CommentQuestion/> } variant="outlined" color="primary" { ...props }>{ t('contact') }</Button>
}