import { setEventDetails } from "../../store/searchOutput/action";
import { setCurrentPage } from "../../store/currentView/action";
import { connect } from "react-redux";
import useTranslation from "next-translate/useTranslation";
import { formatDates } from "../utils";

const EventsDetails = (props) => {
    let { t } = useTranslation();

    const EventView = (eventsArr) => {
        eventsArr = eventsArr.value;

        return eventsArr.map((item, key) => {
            <div>{item.pinswg_name}</div>;
        });
    };

    const eventsArr = props.eventsObj?.value || [];

    // event publishiing flag set to true displa

    function hasOwnPropertyAndNotNull(obj, property) {
        return obj.hasOwnProperty(property) && obj[property] !== null;
    }

    //console.log(eventsArr.length > 0);

    return (
        eventsArr.length > 0 && (
            <div className="govuk-grid-row">
                <div className="card">
                    <div className="card-body">
                        <h2 className="govuk-heading-m ">
                            {t("case:event-title")}
                        </h2>
                        {eventsArr.map(
                            (item, key) =>
                                item.pinswg_eventpublishflag && (
                                    <>
                                        {" "}
                                        <div className="eventContainer">
                                            <div className="eventColumn">
                                                <div>
                                                    <b>
                                                        {" "}
                                                        {t(
                                                            "case:event-name-label"
                                                        )}
                                                    </b>
                                                    : {item.pinswg_name}
                                                </div>
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventname"
                                                ) && (
                                                    <div>
                                                        <b>
                                                            {t(
                                                                "case:event-event-name-label"
                                                            )}
                                                        </b>
                                                        :{" "}
                                                        {item.pinswg_eventname}
                                                    </div>
                                                )}
                                            </div>
                                            <div className="eventColumn">
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventaddressline1"
                                                ) && (
                                                    <>
                                                        <div>
                                                            <b>
                                                                {t(
                                                                    "case:event-address-label"
                                                                )}
                                                            </b>
                                                            :
                                                        </div>
                                                        <div>
                                                            {
                                                                item.pinswg_eventaddressline1
                                                            }
                                                        </div>
                                                    </>
                                                )}

                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventaddressline2"
                                                ) && (
                                                    <div>
                                                        {
                                                            item.pinswg_eventaddressline2
                                                        }
                                                    </div>
                                                )}
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventaddresstown"
                                                ) && (
                                                    <div>
                                                        {
                                                            item.pinswg_eventaddresstown
                                                        }
                                                    </div>
                                                )}
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventaddresscounty"
                                                ) && (
                                                    <div>
                                                        {
                                                            item.pinswg_eventaddresscounty
                                                        }
                                                    </div>
                                                )}
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_eventaddresscounty"
                                                ) && (
                                                    <div>
                                                        {
                                                            item.pinswg_eventaddresspostcode
                                                        }
                                                    </div>
                                                )}
                                            </div>
                                            {/* type of event
                            start date date of event - end date of event

                            if virtual event no address showNoOfRecords
                            show event address  */}
                                            <div className="eventColumn">
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_dateeventrequested"
                                                ) && (
                                                    <div>
                                                        <b>
                                                            {t(
                                                                "case:event-start-date-label"
                                                            )}
                                                        </b>
                                                        :{" "}
                                                        {formatDates(
                                                            item.pinswg_dateeventrequested
                                                        )}
                                                    </div>
                                                )}
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    "pinswg_enddateoftheevent"
                                                ) && (
                                                    <div>
                                                        <b>
                                                            {t(
                                                                "case:event-end-date-label"
                                                            )}
                                                        </b>
                                                        :{" "}
                                                        {item.pinswg_enddateoftheevent !=
                                                            null &&
                                                            formatDates(
                                                                item.pinswg_enddateoftheevent
                                                            )}
                                                    </div>
                                                )}
                                            </div>
                                            <div className="eventColumn">
                                                {hasOwnPropertyAndNotNull(
                                                    item,
                                                    [
                                                        "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue",
                                                    ]
                                                ) && (
                                                    <div>
                                                        <b>
                                                            {t(
                                                                "case:event-type-of-event-label"
                                                            )}
                                                        </b>
                                                        :{" "}
                                                        {
                                                            item[
                                                                "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
                                                            ]
                                                        }
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    </>
                                )
                        )}{" "}
                    </div>
                </div>
            </div>
        )
    );
};

const mapStateToProps = (state) => {
    return {
        ...state,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setEventDetails: (eventsObj) => {
            dispatch(setEventDetails(eventsObj));
        },
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(EventsDetails);