import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import {
    Accordion,
    AccordionItem,
    AccordionItemButton,
    AccordionItemHeading,
    AccordionItemPanel,
} from "react-accessible-accordion";
// import "react-accessible-accordion/dist/fancy-example.css";

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

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

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-one-third">
                    <h3 className="govuk-heading-s">
                        Filter documents by Application stage
                    </h3>
                    <Accordion
                        allowZeroExpanded
                        className="accordion govuk-body-s"
                    >
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Pre Application (0)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                                <br />
                            </AccordionItemPanel>
                        </AccordionItem>
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Developer&apos;s Application (174)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                                <Accordion allowZeroExpanded>
                                    <AccordionItem>
                                        <AccordionItemHeading>
                                            <AccordionItemButton>
                                                Pre Application{" "}
                                            </AccordionItemButton>
                                        </AccordionItemHeading>
                                        <AccordionItemPanel>
                                            <Link href="#">All documents</Link>
                                            <br />
                                        </AccordionItemPanel>
                                    </AccordionItem>
                                    <AccordionItem>
                                        <AccordionItemHeading>
                                            <AccordionItemButton>
                                                Developer&apos;s Application
                                            </AccordionItemButton>
                                        </AccordionItemHeading>
                                        <AccordionItemPanel>
                                            <Link href="#">All documents</Link>
                                        </AccordionItemPanel>
                                    </AccordionItem>
                                    <AccordionItem>
                                        <AccordionItemHeading>
                                            <AccordionItemButton>
                                                Pre Application{" "}
                                            </AccordionItemButton>
                                        </AccordionItemHeading>
                                        <AccordionItemPanel>
                                            <Link href="#">All documents</Link>
                                        </AccordionItemPanel>
                                    </AccordionItem>
                                </Accordion>
                            </AccordionItemPanel>
                        </AccordionItem>
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Acceptance (0)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                            </AccordionItemPanel>
                        </AccordionItem>
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Examination (0)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                            </AccordionItemPanel>
                        </AccordionItem>
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Decision (0)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                            </AccordionItemPanel>
                        </AccordionItem>
                        <AccordionItem>
                            <AccordionItemHeading>
                                <AccordionItemButton>
                                    Decided (0)
                                </AccordionItemButton>
                            </AccordionItemHeading>
                            <AccordionItemPanel>
                                <Link href="#">All documents</Link>
                            </AccordionItemPanel>
                        </AccordionItem>
                    </Accordion>
                </div>
                <div className="govuk-grid-column-two-thirds">
                    <div className="govuk-grid-row flex-container govuk-!-margin-top-9">
                        <div className="govuk-grid-column-two-thirds">
                            <p className="govuk-body-xs govuk-!-margin-top-1">
                                Showing 1 to 10 of 54 entries
                            </p>
                        </div>

                        <div className=" govuk-grid-column-two-thirds govuk-form-group">
                            <label className="govuk-label-xs " htmlFor="showNo">
                                Show{" "}
                                <select
                                    className="govuk-select govuk-select-s"
                                    id="showNo"
                                    name="showNo"
                                >
                                    <option value="1">10</option>
                                    <option value="1">25</option>
                                    <option value="1">50</option>
                                    <option value="1">100</option>
                                </select>{" "}
                                Entries
                            </label>
                        </div>
                    </div>
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-full">
                            <div className="documents__list">
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>

                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                                <div className="documents__list__item">
                                    <div className="document__list__item__title">
                                        <a
                                            href="#"
                                            className="document__list__item__link govuk-link govuk-link--no-underline"
                                        >
                                            Core Documents List v14
                                        </a>
                                        <span>(Document Size: 715 KB)</span>
                                    </div>
                                    <div className="document__list__meta">
                                        <div className="document__list__stage">
                                            Examination &gt; Inquiry Documents
                                            &gt; Administration
                                        </div>
                                        <div className="document__list__publish_date">
                                            Published: 17/05/2021
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="govuk-grid-row ">
                        <div className="govuk-grid-column-full">
                            <p className="govuk-body-xs">
                                Previous <span>1</span>{" "}
                                <span>
                                    <Link href="#">2</Link>
                                </span>{" "}
                                <span>
                                    <Link href="#">3</Link>
                                </span>{" "}
                                <span>
                                    <Link href="#">4</Link>
                                </span>{" "}
                                <span>
                                    <Link href="#">5</Link>
                                </span>{" "}
                                <Link href="#">Next</Link>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ApplicationTabsDocuments;