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";
import {
    getLivePublishedEvent,
    isEventLiveNow
} from "./summary/utils/liveEvent";
import { useRouter } from "next/router";

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

    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;
    }

    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>
                                                )}
                                                {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>
                                                )}
                                                {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_eventaddressline1"
                                                ) && (
                                                    <>
                                                        <div
                                                            style={{
                                                                display: "flex"
                                                            }}
                                                        >
                                                            <b>
                                                                {t(
                                                                    "case:event-address-label"
                                                                )}
                                                            </b>
                                                            :
                                                            <div
                                                                style={{
                                                                    display:
                                                                        "flex",
                                                                    marginLeft:
                                                                        "10px",
                                                                    flexDirection:
                                                                        "column"
                                                                }}
                                                            >
                                                                {hasOwnPropertyAndNotNull(
                                                                    item,
                                                                    "pinswg_eventaddressline1"
                                                                ) && (
                                                                    <span>
                                                                        {
                                                                            item.pinswg_eventaddressline1
                                                                        }
                                                                    </span>
                                                                )}
                                                                {hasOwnPropertyAndNotNull(
                                                                    item,
                                                                    "pinswg_eventaddressline2"
                                                                ) && (
                                                                    <span>
                                                                        {
                                                                            item.pinswg_eventaddressline2
                                                                        }
                                                                    </span>
                                                                )}
                                                                {hasOwnPropertyAndNotNull(
                                                                    item,
                                                                    "pinswg_eventaddresstown"
                                                                ) && (
                                                                    <span>
                                                                        {
                                                                            item.pinswg_eventaddresstown
                                                                        }
                                                                    </span>
                                                                )}
                                                                {hasOwnPropertyAndNotNull(
                                                                    item,
                                                                    "pinswg_eventaddresscounty"
                                                                ) && (
                                                                    <span>
                                                                        {
                                                                            item.pinswg_eventaddresscounty
                                                                        }
                                                                    </span>
                                                                )}
                                                                {hasOwnPropertyAndNotNull(
                                                                    item,
                                                                    "pinswg_eventaddresscounty"
                                                                ) && (
                                                                    <span>
                                                                        {
                                                                            item.pinswg_eventaddresspostcode
                                                                        }
                                                                    </span>
                                                                )}
                                                            </div>
                                                        </div>
                                                    </>
                                                )}
                                            </div>
                                            {/* type of event
                            start date date of event - end date of event

                            if virtual event no address showNoOfRecords
                            show event address  */}

                                            {hasOwnPropertyAndNotNull(
                                                item,
                                                "pinswg_linktotheevent"
                                            ) &&
                                                isEventLiveNow(item) && (
                                                    <div className="eventColumn">
                                                        <a
                                                            href={
                                                                locale === "en"
                                                                    ? item.pinswg_linktotheevent
                                                                    : item.pinswg_linktotheeventstreamwelsh
                                                            }
                                                            className="govuk-link"
                                                            target="_blank"
                                                            rel="noopener noreferrer"
                                                        >
                                                            {t(
                                                                "case:live-event-link"
                                                            )}
                                                        </a>
                                                    </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);