import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

export default function CaseSummary() {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    return (
        <div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h1 class="govuk-heading-xl govuk-!-margin-bottom-7">
                        Reference: APP/B1415/W/20/3271702
                    </h1>

                    <dl class="govuk-summary-list govuk-!-margin-bottom-9">
                        <div class="govuk-summary-list__row">
                            <dt class="govuk-summary-list__key">
                                {t("case:summary-applicant-label")}
                            </dt>
                            <dd class="govuk-summary-list__value">
                                Mr J Pocknell
                            </dd>
                        </div>
                        <div class="govuk-summary-list__row">
                            <dt class="govuk-summary-list__key">
                                {t("case:summary-agent-label")}
                            </dt>
                            <dd class="govuk-summary-list__value">
                                Mr Cos Polito
                            </dd>
                        </div>
                        <div class="govuk-summary-list__row">
                            <dt class="govuk-summary-list__key">
                                {t("case:summary-site-address-label")}
                            </dt>
                            <dd class="govuk-summary-list__value">
                                72 Guild Street
                                <br />
                                London
                                <br />
                                SE23 6FH
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div class="govuk-button-group">
                        <Link href="/advancedsearch">
                            <a className="govuk-button">
                                {t("case:summary-make-representation-label")}
                            </a>
                        </Link>
                        <Link href="/advancedsearch">
                            <a className="govuk-button govuk-button--secondary">
                                {t("case:summary-back-button-label")}
                            </a>
                        </Link>
                    </div>
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="flex-container grid-row govuk-body case">
                    <div className="card" id="casescomment-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h2 class="govuk-heading-m govuk-!-margin-bottom-7">
                                    {t("case:summary-case-details-label")}
                                </h2>

                                <dl class="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-case-type-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Planning Appeal (W){" "}
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-lpa-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Hastings Borough Council
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-case-summary-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Erection of a two-storey chalet
                                            style detached dwelling
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-case-officer-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            {" "}
                                            Neale Oliver
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-procedure-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Written representations
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-status-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            In Progress
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-decision-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Allowed
                                            <a href="/">
                                                3272770 Appeal Decision.pdf
                                            </a>
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-case-link-status-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Not Linked
                                        </dd>
                                    </div>
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-linked-cases-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            0
                                        </dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div className="card" id="casescomment-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h3 class="govuk-heading-m govuk-!-margin-bottom-7">
                                    {t("case:summary-dates-label")}
                                </h3>
                                <dl class="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-start-date-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            26-May-21
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-questionnaire-due-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            02-Jun-21
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-statement-due-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            30-Jun-21
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-interested-party-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            30-Jun-21
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-applicant-final-comments-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            14-Jul-21
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-inquiry-evidence-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            N/A
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t("case:summary-event-date-label")}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Date arranged
                                        </dd>
                                    </div>

                                    <div class="govuk-summary-list__row">
                                        <dt class="govuk-summary-list__key">
                                            {t(
                                                "case:summary-decision-date-label"
                                            )}
                                        </dt>
                                        <dd class="govuk-summary-list__value">
                                            Not yet decided
                                        </dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div class="govuk-button-group">
                        <Link href="/advancedsearch">
                            <a className="govuk-button">
                                {t("case:summary-documents-button-label")}
                            </a>
                        </Link>
                    </div>
                </div>
            </div> */}
        </div>
    );
}