import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { Field } from "redux-form";
import { RenderDatePicker } from "./renderDatePicker";
import { validateField } from "../validationUtils";
import { hasOwn } from "../../utils";

const dateDiffInDays = (a, b) => {
    const _MS_PER_DAY = 1000 * 60 * 60 * 24;
    const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
    const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
};

export function DateFieldPicker(props) {
    const {
        name,
        label,
        parentField,
        form,
        formProps,
        parentFieldShowOnValue,
        validation
    } = props;

    let dateStart = props.dateStart;
    let dateEnd = props.dateEnd;
    let { t } = useTranslation();

    const showIfHasParentShowValue =
        parentField != false &&
        !_.isEmpty(formProps[form]) &&
        hasOwn(formProps[form].values, parentField) &&
        formProps[form].values[parentField] == parentFieldShowOnValue;

    const requiredMessage = t("newappeal:is-required-label");
    const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
    const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");

    dateStart =
        showIfHasParentShowValue && name == "pinswg_dateoflpadecision"
            ? "-" +
              (dateDiffInDays(
                  new Date(formProps[form].values["pinswg_dateofapplication"]),
                  new Date()
              ) -
                  1) +
              "d"
            : dateStart;

    return (
        <div className="govuk-form-group">
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        id={name}
                        label={label}
                        component={RenderDatePicker}
                        validate={(value) =>
                            validateField(
                                value,
                                validation,
                                requiredMessage,
                                emojiNotAllowedMessage,
                                invalidPostcodeMessage
                            )
                        }
                        errorMsg={t("newappeal:select-a-date-label")}
                        dateStart={dateStart}
                        dateEnd={dateEnd}
                        hint={props.hint}
                    />
                )
            ) : (
                <Field
                    name={name}
                    id={name}
                    label={label}
                    component={RenderDatePicker}
                    validate={(value) =>
                        validateField(
                            value,
                            validation,
                            requiredMessage,
                            emojiNotAllowedMessage,
                            invalidPostcodeMessage
                        )
                    }
                    errorMsg={t("newappeal:select-a-date-label")}
                    dateStart={dateStart}
                    dateEnd={dateEnd}
                    hint={props.hint}
                />
            )}
        </div>
    );
}