import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm } from "redux-form";
import { RenderPickList, RenderTextfield } from "./representationElements";

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

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

    const { currentType, casesObj } = props;

    return (
        <>
            {" "}
            <div className="govuk-grid-column-full">
                <div id="rep-sumamry" className="govuk-grid-row">
                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                        Make a representation
                    </h1>

                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                Appeal Reference
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {currentType == "searchResultsObj"
                                    ? casesObj.title
                                    : casesObj.reference}
                            </dd>
                        </div>
                        <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 || ""}
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-agent-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                Mr A Agent
                            </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">
                                {casesObj.address1 || ""}
                                <br />
                                {casesObj.town || ""}

                                <br />
                                {casesObj.postcode || ""}
                            </dd>
                        </div>
                    </dl>
                </div>
                <div className="govuk-grid-row">
                    <p className="govuk-body">
                        This form enables you to submit comments on a case to
                        The Planning Inspectorate.{" "}
                    </p>
                    <p className="govuk-body">
                        Please note that comments from interested parties need
                        to be made within the timetable. This can be found on
                        the previous &lsquo;Case Summary&lsquo; page. Comments
                        submitted after this date may be considered invalid and
                        returned to the sender.
                    </p>
                </div>
            </div>
        </>
    );
};

export default RepDetails;