import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState } from "react";
import ApplicationSideBar from "./applicationSideBar";
import ApplicationTabsComments from "./applicationTabsComments";
import ApplicationTabsDocuments from "./applicationTabsDocuments";
import ApplicationTabsRegistrationForm from "./applicationTabsRegistrationForm";
import ApplicationTabsTimeLine from "./applicationTabsTimeline";

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

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

    const [showTab, setShowTab] = useState(1);

    let selectTab = (tabID) => {
        setShowTab(tabID);
        console.log(showTab);
    };

    return (
        <>
            <div className="govuk-tabs" data-module="govuk-tabs">
                <h2 className="govuk-tabs__title">Contents</h2>
                <ul className="govuk-tabs__list">
                    <li
                        className={
                            showTab == 1
                                ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                : "govuk-tabs__list-item"
                        }
                    >
                        <a
                            onClick={() => {
                                selectTab(1);
                            }}
                            className="govuk-tabs__tab"
                            href="#past-day"
                        >
                            Overview
                        </a>
                    </li>
                    <li
                        className={
                            showTab == 2
                                ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                : "govuk-tabs__list-item"
                        }
                    >
                        <a
                            onClick={() => {
                                selectTab(2);
                            }}
                            className="govuk-tabs__tab"
                            href="#past-week"
                        >
                            Documents{" "}
                        </a>
                    </li>
                    <li
                        className={
                            showTab == 3
                                ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                : "govuk-tabs__list-item"
                        }
                    >
                        <a
                            onClick={() => {
                                selectTab(3);
                            }}
                            className="govuk-tabs__tab"
                            href="#past-week"
                        >
                            Registration form
                        </a>
                    </li>
                    <li
                        className={
                            showTab == 4
                                ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
                                : "govuk-tabs__list-item"
                        }
                    >
                        <a
                            onClick={() => {
                                selectTab(4);
                            }}
                            className="govuk-tabs__tab"
                            href="#past-week"
                        >
                            Comments Received
                        </a>
                    </li>
                </ul>
                <div
                    className={
                        showTab == 1
                            ? "govuk-tabs__panel "
                            : "govuk-tabs__panel govuk-tabs__panel--hidden"
                    }
                    id="past-day"
                >
                    <div className="govuk-grid-row">
                        <div className="govuk-grid-column-two-thirds">
                            <ApplicationTabsTimeLine />
                        </div>
                        <div className="govuk-grid-column-one-third">
                            <ApplicationSideBar />
                        </div>
                    </div>
                </div>
                <div
                    className={
                        showTab == 2
                            ? "govuk-tabs__panel "
                            : "govuk-tabs__panel govuk-tabs__panel--hidden"
                    }
                    id="past-week"
                >
                    <ApplicationTabsDocuments />
                </div>
                <div
                    className={
                        showTab == 3
                            ? "govuk-tabs__panel "
                            : "govuk-tabs__panel govuk-tabs__panel--hidden"
                    }
                    id="past-week"
                >
                    <ApplicationTabsRegistrationForm />
                </div>
                <div
                    className={
                        showTab == 4
                            ? "govuk-tabs__panel "
                            : "govuk-tabs__panel govuk-tabs__panel--hidden"
                    }
                    id="past-week"
                >
                    <ApplicationTabsComments />
                </div>
            </div>
        </>
    );
};

export default ApplicationTabs;