import classNames from "classnames"
import Container from "@/components/shared/Container"
import { APP_NAME } from "@/constants/app.constant"
import { PAGE_CONTAINER_GUTTER_X } from "@/constants/theme.constant"
import { useStoreState } from "@/store"
import { Link, useNavigate } from "react-router-dom"
import { ROUTES_ENUM } from "@/routes/route.constant"

export type FooterPageContainerType = "gutterless" | "contained"

type FooterProps = {
  pageContainerType: FooterPageContainerType
}

const FooterContent = () => {
  const { currentUiVersion } = useStoreState((a) => a.locale)
  const apiConfig = useStoreState((state) => state.abpConfig.config?.extraProperties)
  const uiMode = import.meta.env.MODE

  return (
    <>
      <div className="flex flex-col sm:flex-row items-center justify-between w-full">
        <div className="space-x-1">
          <span>Copyright &copy; {new Date().getFullYear()}</span>
          <span className="font-semibold">{APP_NAME}</span>
        </div>
        <Link to={ROUTES_ENUM.protected.admin.changeLog}>
          <div className="text-muted capitalize">
            <span>
              <b>UI: </b>
              {uiMode}:{currentUiVersion}
            </span>
            <span className="mx-2">|</span>
            {apiConfig && (
              <span>
                <b>API: </b>
                {apiConfig["environment"].toString()}:{apiConfig["version"].toString()}
              </span>
            )}
          </div>
        </Link>
      </div>
    </>
  )
}

export default function Footer({ pageContainerType = "contained" }: FooterProps) {
  return (
    <footer
      className={classNames(
        `print:hidden footer flex flex-auto items-center h-6 ${PAGE_CONTAINER_GUTTER_X}`
      )}
    >
      {pageContainerType === "contained" ? (
        <Container>
          <FooterContent />
        </Container>
      ) : (
        <FooterContent />
      )}
    </footer>
  )
}