import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission";
import { useTranslation } from "react-i18next";
import React, { HTMLProps } from "react";
import { InternshipProposalState } from "@/state/reducer/proposal";
import { Alert, AlertTitle } from "@material-ui/lab";
import { Box, Button, ButtonProps, StepProps } from "@material-ui/core";
import { Deadlines, Edition, getEditionDeadlines } from "@/data/edition";
import { Actions, Step } from "@/components";
import { route } from "@/routing";
import { Link as RouterLink } from "react-router-dom";
import { ClipboardEditOutline, FileFind } from "mdi-material-ui/index";
import { ContactAction, Status } from "@/pages/steps/common";

const ProposalActions = () => {
    const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.proposal));
    const { t } = useTranslation();

    const ReviewAction = (props: ButtonProps) =>
        <Button startIcon={ <FileFind/> }
                component={ RouterLink } to={ route("internship_proposal_preview") }
                { ...props as any }>
            { t('review') }
        </Button>

    const FormAction = ({ children = t('steps.internship-proposal.form'), ...props }: ButtonProps) =>
        <Button to={ route("internship_proposal") } variant="contained" color="primary" component={ RouterLink }
                startIcon={ <ClipboardEditOutline/> } { ...props as any }>
            { children }
        </Button>

    switch (status) {
        case "awaiting":
            return <Actions>
                <ReviewAction/>
            </Actions>
        case "accepted":
            return <Actions>
                <ReviewAction/>
                <FormAction variant="outlined" color="secondary">{ t('make-changes') }</FormAction>
            </Actions>
        case "declined":
            return <Actions>
                <FormAction>{ t('fix-errors') }</FormAction>
                <ContactAction />
            </Actions>
        case "draft":
            return <Actions>
                <FormAction color="primary">{ t('steps.internship-proposal.action') }</FormAction>
            </Actions>
        default:
            return <Actions/>
    }
}

export const ProposalComment = (props: HTMLProps<HTMLDivElement>) => {
    const { comment, declined } = useSelector<AppState, InternshipProposalState>(state => state.proposal);
    const { t } = useTranslation();

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

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

    const submission = useSelector<AppState, SubmissionState>(state => state.proposal);
    const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.proposal));
    const deadlines = useSelector<AppState, Deadlines>(state => getEditionDeadlines(state.edition as Edition)); // edition cannot be null at this point

    const { sent, declined, comment } = submission;

    return <Step { ...props }
                 label={ t('steps.internship-proposal.header') }
                 active={ true } completed={ sent } declined={ declined } waiting={ status == "awaiting" }
                 until={ deadlines.proposal }
                 state={ <Status submission={ submission } /> }>
        <p>{ t(`steps.internship-proposal.info.${ status }`) }</p>
        { comment && <Box pb={ 2 }><ProposalComment/></Box> }
        <ProposalActions/>
    </Step>;
}