import React from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import {
    Button,
    CSSReset,
    Flex,
    Heading,
    Text,
    ThemeProvider,
    useColorMode
} from "@chakra-ui/core";
import { inRange } from "lodash";
import { defaultTheme } from "~/theme";

const ColorModeProvider = dynamic(
    () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
    { ssr: false }
);

const ErrorContent = ({ msg, statusCode }) => {
    const { colorMode } = useColorMode();
    const bg = { light: "white", dark: "black" };
    const baseCode = inRange(statusCode, 400, 500)
        ? 400
        : inRange(statusCode, 500, 600)
        ? 500
        : 400;
    const errorColor = {
        400: { light: "error.500", dark: "error.300" },
        500: { light: "danger.500", dark: "danger.300" }
    };
    const variantColor = {
        400: "error",
        500: "danger"
    };
    const color = { light: "black", dark: "white" };
    const { push } = useRouter();
    const handleClick = () => push("/");
    return (
        <Flex
            w="100%"
            minHeight="100vh"
            bg={bg[colorMode]}
            flexDirection="column"
            color={color[colorMode]}
        >
            <Flex
                px={2}
                py={0}
                w="100%"
                as="main"
                flexGrow={1}
                flexShrink={1}
                flexBasis="auto"
                textAlign="center"
                alignItems="center"
                flexDirection="column"
                justifyContent="start"
                mt={["50%", "50%", "50%", "25%"]}
            >
                <Heading mb={4} as="h1" fontSize="2xl">
                    <Text as="span" color={errorColor[baseCode][colorMode]}>
                        {msg}
                    </Text>
                    {statusCode === 404 && <Text as="span"> isn't a thing...</Text>}
                </Heading>

                <Button
                    variant="outline"
                    onClick={handleClick}
                    variantColor={variantColor[baseCode]}
                >
                    Home
                </Button>
            </Flex>
        </Flex>
    );
};

const ErrorPage = ({ msg, statusCode }) => {
    return (
        <ThemeProvider theme={defaultTheme}>
            <ColorModeProvider>
                <CSSReset />
                <ErrorContent msg={msg} statusCode={statusCode} />
            </ColorModeProvider>
        </ThemeProvider>
    );
};

ErrorPage.getInitialProps = ({ res, err }) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
    const msg = err ? err.message : res.req?.url || "Error";
    return { msg, statusCode };
};

export default ErrorPage;