import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { InsuranceState } from "@/state/reducer/insurance";
import { Actions, Step } from "@/components";
import { useTranslation } from "react-i18next";
import React from "react";
import { Edition, getEditionDeadlines } from "@/data/edition";
import { Moment } from "moment";
import { ContactAction } from "@/pages/steps/common";

export const InsuranceStep = () => {
    const insurance = useSelector<AppState, InsuranceState>(root => root.insurance);
    const deadline  = useSelector<AppState, Moment | undefined>(state => getEditionDeadlines(state.edition as Edition).insurance); // edition cannot be null at this point
    const { t } = useTranslation();

    // we don't want to show this step unless it's required
    if (!insurance.required) {
        return null;
    }

    return <Step label={ t("steps.insurance.header") } until={ deadline } completed={ insurance.signed } active={ !insurance.signed }>
        <p>{ t(`steps.insurance.instructions`) }</p>
        <Actions>
            <ContactAction />
        </Actions>
    </Step>
}
