import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission";
import { useTranslation } from "react-i18next";
import { Box, Button, ButtonProps, StepProps } from "@material-ui/core";
import { FileDownloadOutline, FileUploadOutline } from "mdi-material-ui/index";
import { route } from "@/routing";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { Actions, Step } from "@/components";
import React, { HTMLProps } from "react";
import { Alert, AlertTitle } from "@material-ui/lab";
import { ContactAction, Status } from "@/pages/steps/common";
import { Description as DescriptionIcon } from "@material-ui/icons";
import { useDeadlines } from "@/hooks";
import { InternshipDocument } from "@/api/dto/internship-registration";
import { FileInfo } from "@/components/fileinfo";
import { useSpacing } from "@/styles";
import { AcceptanceActions } from "@/components/acceptance-action";
import { InternshipPlanActions, useDispatch } from "@/state/actions";

const PlanActions = () => {
    const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.plan));

    const { t } = useTranslation();
    const dispatch = useDispatch();
    const history = useHistory();

    const FormAction = ({ children = t('steps.plan.submit'), ...props }: ButtonProps) =>
        <Button to={ route("internship_plan") } variant="contained" color="primary" component={ RouterLink } startIcon={ <FileUploadOutline /> } { ...props as any }>
            { children }
        </Button>

    const TemplateAction = (props: ButtonProps) =>
        <Button href="https://eti.pg.edu.pl/documents/611675/100028367/indywidualny%20program%20praktyk" startIcon={ <DescriptionIcon/> } { ...props }>
            { t('steps.plan.template') }
        </Button>

    const handleAccept = (comment?: string) => {
        dispatch({ type: InternshipPlanActions.Approve, comment: comment || null });
        history.push(route("home"));
    }

    const handleDiscard = (comment: string) => {
        dispatch({ type: InternshipPlanActions.Decline, comment: comment });
        history.push(route("home"));
    }

    switch (status) {
        case "awaiting":
            return <Actions>
                <AcceptanceActions onAccept={ handleAccept } onDiscard={ handleDiscard } label="plan" />
            </Actions>
        case "accepted":
            return <Actions>
                <FormAction variant="outlined" color="secondary">{ t('send-again') }</FormAction>
            </Actions>
        case "declined":
            return <Actions>
                <FormAction>{ t('fix-errors') }</FormAction>
                <TemplateAction />
                <ContactAction/>
            </Actions>
        case "draft":
            return <Actions>
                <FormAction />
                <TemplateAction />
            </Actions>

        default:
            return <Actions/>
    }
}

export const PlanComment = (props: HTMLProps<HTMLDivElement>) => {
    const { comment, declined } = useSelector<AppState, SubmissionState>(state => state.plan);
    const { t } = useTranslation();

    return comment ? <Alert severity={ declined ? "error" : "warning" } { ...props as any }>
        <AlertTitle>{ t('comments') }</AlertTitle>
        { comment }
    </Alert> : null
}

export const PlanStep = (props: StepProps) => {
    const { t } = useTranslation();

    const submission = useSelector<AppState, SubmissionState>(state => state.plan);
    const document = useSelector<AppState, InternshipDocument>(state => state.plan.document as InternshipDocument);
    const spacing = useSpacing(2);

    const status = getSubmissionStatus(submission);
    const deadlines = useDeadlines();

    const { sent, declined, comment } = submission;

    return <Step { ...props }
                 label={ t('steps.plan.header') }
                 active={ true } completed={ sent } declined={ declined } waiting={ status == "awaiting" }
                 until={ deadlines.proposal }
                 state={ <Status submission={ submission } /> }>
        <div className={ spacing.vertical }>
            <p>{ t(`steps.plan.info.${ status }`) }</p>

            { comment && <Box pb={ 2 }><PlanComment/></Box> }
            { document && <FileInfo document={ document } /> }

            <PlanActions/>
        </div>
    </Step>;
}