import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";

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

    const router = useRouter();
    const { locale } = router;

    const { currentType, casesObj } = props;

    let { caseReference } = props;

    let setCaseDetailsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.myRepresentations.myRepresentations
            : props.searchResultsObj.searchDetailsObj
        : props.currentType == "watchedCases"
        ? props.props.props.props.watchedCases.watchedCasesDetails
        : props.props.props.searchResultsObj.searchDetailsObj;

    var detailsObj = {};

    caseReference = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? router.query.case
            : caseReference
        : caseReference;

    detailsObj = jsonpath({
        path: '$..[?(@ && @.pinswg_name=="' + caseReference + '")]',
        json: setCaseDetailsObj,
        eval: true,
    });

    detailsObj = detailsObj[0];

    return (
        <>
            {" "}
            <div className="govuk-grid-column-full">
                <div id="rep-sumamry" className="govuk-grid-row">
                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-applicant-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {casesObj.appellantApplicant || ""}
                                {
                                    detailsObj[
                                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                                    ]
                                }
                            </dd>
                        </div>

                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-site-address-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {_.has(detailsObj, "pinswg_siteaddressline1")
                                    ? detailsObj.pinswg_siteaddressline1
                                    : ""}
                                {_.has(detailsObj, "pinswg_siteaddressline1") &&
                                    detailsObj.pinswg_siteaddressline1 !=
                                        null && <br />}
                                {_.has(detailsObj, "pinswg_siteaddressline2")
                                    ? detailsObj.pinswg_siteaddressline2
                                    : ""}
                                {_.has(detailsObj, "pinswg_siteaddressline2") &&
                                    detailsObj.pinswg_siteaddressline2 !=
                                        null && <br />}
                                {_.has(detailsObj, "pinswg_siteaddresstown")
                                    ? detailsObj.pinswg_siteaddresstown
                                    : ""}
                                {_.has(detailsObj, "pinswg_siteaddresstown") &&
                                    detailsObj.pinswg_siteaddresstown !=
                                        null && <br />}
                                {_.has(detailsObj, "pinswg_siteaddresscounty")
                                    ? detailsObj.pinswg_siteaddresscounty
                                    : ""}
                                {_.has(
                                    detailsObj,
                                    "pinswg_siteaddresscounty"
                                ) &&
                                    detailsObj.pinswg_siteaddresscounty !=
                                        null && <br />}
                                {_.has(detailsObj, "pinswg_siteaddresspostcode")
                                    ? detailsObj.pinswg_siteaddresspostcode
                                    : ""}
                            </dd>
                        </div>
                    </dl>
                </div>
                <div className="govuk-grid-row">
                    <p className="govuk-body">
                        {t("myrepresentations:capacity-para-one")}
                    </p>
                    <p className="govuk-body">
                        {t("myrepresentations:capacity-para-two")}
                    </p>
                </div>
            </div>
        </>
    );
};

export default RepDetails;