import React, {
  useState,
  useEffect,
  useRef,
  ReactNode,
} from "react";
import {
  Share,
  DownloadSimple,
  Gear,
  X,
  GithubLogo,
  SignOut,
  ArrowSquareOut,
  CloudArrowUp,
  CaretDown,
  User,
  FilePlus,
} from "phosphor-react";
import Image from "next/image";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuArrow,
  DropdownMenuSeparator,
} from "./DropdownMenu";
import NewWindow from "react-new-window";
import { signOut, useSession } from "next-auth/react";
import { useSnapshot } from "valtio";
import toast from "react-hot-toast";

import {
  syncToGist,
  updateEditorSettings,
  downloadAsZip,
} from "../state/actions";
import state from "../state";
import Box from "./Box";
import Button from "./Button";
import Container from "./Container";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "./Dialog";
import Flex from "./Flex";
import Stack from "./Stack";
import { Input, Label } from "./Input";
import Tooltip from "./Tooltip";
import { showAlert } from "../state/actions/showAlert";


const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
  const snap = useSnapshot(state);
  const [editorSettingsOpen, setEditorSettingsOpen] = useState(false);
  const { data: session, status } = useSession();
  const [popup, setPopUp] = useState(false);
  const [editorSettings, setEditorSettings] = useState(snap.editorSettings);
  
  useEffect(() => {
    if (session && session.user && popup) {
      setPopUp(false);
    }
  }, [session, popup]);


  const showNewGistAlert = () => {
    showAlert("Are you sure?", {
      body: (
        <>
          This action will create new <strong>public</strong> Github Gist from
          your current saved files. You can delete gist anytime from your GitHub
          Gists page.
        </>
      ),
      cancelText: "Cancel",
      confirmText: "Create new Gist",
      confirmPrefix: <FilePlus size="15px" />,
      onConfirm: () => syncToGist(session, true),
    });
  };

  const scrollRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  return (
    <Flex css={{ flexShrink: 0, gap: "$0" }}>
      <Flex
        id="kissa"
        ref={scrollRef}
        css={{
          overflowX: "scroll",
          overflowY: "hidden",
          py: "$3",
          pb: "$0",
          flex: 1,
          "&::-webkit-scrollbar": {
            height: "0.3em",
            background: "rgba(0,0,0,.0)",
          },
          "&::-webkit-scrollbar-gutter": "stable",
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: "rgba(0,0,0,.2)",
            outline: "0px",
            borderRadius: "9999px",
          },
          scrollbarColor: "rgba(0,0,0,.2) rgba(0,0,0,0)",
          scrollbarGutter: "stable",
          scrollbarWidth: "thin",
          ".dark &": {
            "&::-webkit-scrollbar": {
              background: "rgba(0,0,0,.0)",
            },
            "&::-webkit-scrollbar-gutter": "stable",
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: "rgba(255,255,255,.2)",
              outline: "0px",
              borderRadius: "9999px",
            },
            scrollbarColor: "rgba(255,255,255,.2) rgba(0,0,0,0)",
            scrollbarGutter: "stable",
            scrollbarWidth: "thin",
          },
        }}
        onWheelCapture={e => {
          if (scrollRef.current) {
            scrollRef.current.scrollLeft += e.deltaY;
          }
        }}
      >
        <Container css={{ flex: 1 }} ref={containerRef}>
          {renderNav?.()}
        </Container>
      </Flex>
      <Flex
        css={{
          py: "$3",
          backgroundColor: "$mauve2",
          zIndex: 1,
        }}
      >
        <Container
          css={{ width: "unset", display: "flex", alignItems: "center" }}
        >
          {status === "authenticated" ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Box
                  css={{
                    display: "flex",
                    borderRadius: "$full",
                    overflow: "hidden",
                    width: "$6",
                    height: "$6",
                    boxShadow: "0px 0px 0px 1px $colors$mauve11",
                    position: "relative",
                    mr: "$3",
                    "@hover": {
                      "&:hover": {
                        cursor: "pointer",
                        boxShadow: "0px 0px 0px 1px $colors$mauve12",
                      },
                    },
                  }}
                >
                  <Image
                    src={session?.user?.image || ""}
                    width="30px"
                    height="30px"
                    objectFit="cover"
                    alt="User avatar"
                  />
                </Box>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem disabled onClick={() => signOut()}>
                  <User size="16px" /> {session?.user?.username} (
                  {session?.user.name})
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() =>
                    window.open(
                      `http://gist.github.com/${session?.user.username}`
                    )
                  }
                >
                  <ArrowSquareOut size="16px" />
                  Go to your Gist
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/" })}>
                  <SignOut size="16px" /> Log out
                </DropdownMenuItem>

                <DropdownMenuArrow offset={10} />
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <Button
              outline
              size="sm"
              css={{ mr: "$3" }}
              onClick={() => setPopUp(true)}
            >
              <GithubLogo size="16px" /> Login
            </Button>
          )}

          <Stack
            css={{
              display: "inline-flex",
              marginLeft: "auto",
              flexShrink: 0,
              gap: "$0",
              borderRadius: "$sm",
              boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
              zIndex: 9,
              position: "relative",
              button: {
                borderRadius: 0,
                px: "$2",
                alignSelf: "flex-start",
                boxShadow: "none",
              },
              "button:not(:first-child):not(:last-child)": {
                borderRight: 0,
                borderLeft: 0,
              },
              "button:first-child": {
                borderTopLeftRadius: "$sm",
                borderBottomLeftRadius: "$sm",
              },
              "button:last-child": {
                borderTopRightRadius: "$sm",
                borderBottomRightRadius: "$sm",
                boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
                "&:hover": {
                  boxShadow: "inset 0px 0px 0px 1px $colors$mauve12",
                },
              },
            }}
          >
            <Tooltip content="Download as ZIP">
              <Button
                isLoading={snap.zipLoading}
                onClick={downloadAsZip}
                outline
                size="sm"
                css={{ alignItems: "center" }}
              >
                <DownloadSimple size="16px" />
              </Button>
            </Tooltip>
            <Tooltip content="Copy share link to clipboard">
              <Button
                outline
                size="sm"
                css={{ alignItems: "center" }}
                onClick={() => {
                  navigator.clipboard.writeText(
                    `${window.location.origin}/develop/${snap.gistId}`
                  );
                  toast.success("Copied share link to clipboard!");
                }}
              >
                <Share size="16px" />
              </Button>
            </Tooltip>
            <Tooltip
              content={
                session && session.user
                  ? snap.gistOwner === session?.user.username
                    ? "Sync to Gist"
                    : "Create as a new Gist"
                  : "You need to be logged in to sync with Gist"
              }
            >
              <Button
                outline
                size="sm"
                isDisabled={!session || !session.user}
                isLoading={snap.gistLoading}
                css={{ alignItems: "center" }}
                onClick={() => {
                  if (!session || !session.user) {
                    return;
                  }
                  if (snap.gistOwner === session?.user.username) {
                    syncToGist(session);
                  } else {
                    showNewGistAlert();
                  }
                }}
              >
                {snap.gistOwner === session?.user.username ? (
                  <CloudArrowUp size="16px" />
                ) : (
                  <FilePlus size="16px" />
                )}
              </Button>
            </Tooltip>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button outline size="sm">
                  <CaretDown size="16px" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem
                  disabled={snap.zipLoading}
                  onClick={downloadAsZip}
                >
                  <DownloadSimple size="16px" /> Download as ZIP
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => {
                    navigator.clipboard.writeText(
                      `${window.location.origin}/develop/${snap.gistId}`
                    );
                    toast.success("Copied share link to clipboard!");
                  }}
                >
                  <Share size="16px" />
                  Copy share link to clipboard
                </DropdownMenuItem>
                <DropdownMenuItem
                  disabled={
                    session?.user.username !== snap.gistOwner || !snap.gistId
                  }
                  onClick={() => {
                    syncToGist(session);
                  }}
                >
                  <CloudArrowUp size="16px" /> Push to Gist
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  disabled={status !== "authenticated"}
                  onClick={() => {
                    showNewGistAlert();
                  }}
                >
                  <FilePlus size="16px" /> Create as a new Gist
                </DropdownMenuItem>

                <DropdownMenuItem onClick={() => setEditorSettingsOpen(true)}>
                  <Gear size="16px" /> Editor Settings
                </DropdownMenuItem>

                <DropdownMenuArrow offset={10} />
              </DropdownMenuContent>
            </DropdownMenu>
          </Stack>

          {popup && !session ? (
            <NewWindow center="parent" url="/sign-in" />
          ) : null}
        </Container>
      </Flex>

      <Dialog open={editorSettingsOpen} onOpenChange={setEditorSettingsOpen}>
        <DialogTrigger asChild>
          {/* <Button outline size="sm" css={{ alignItems: "center" }}>
                  <Gear size="16px" />
                </Button> */}
        </DialogTrigger>
        <DialogContent>
          <DialogTitle>Editor settings</DialogTitle>
          <DialogDescription>
            <Label>Tab size</Label>
            <Input
              type="number"
              min="1"
              value={editorSettings.tabSize}
              onChange={e =>
                setEditorSettings(curr => ({
                  ...curr,
                  tabSize: Number(e.target.value),
                }))
              }
            />
          </DialogDescription>

          <Flex css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}>
            <DialogClose asChild>
              <Button
                outline
                onClick={() => updateEditorSettings(editorSettings)}
              >
                Cancel
              </Button>
            </DialogClose>
            <DialogClose asChild>
              <Button
                variant="primary"
                onClick={() => updateEditorSettings(editorSettings)}
              >
                Save changes
              </Button>
            </DialogClose>
          </Flex>
          <DialogClose asChild>
            <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
              <X size="20px" />
            </Box>
          </DialogClose>
        </DialogContent>
      </Dialog>
    </Flex>
  );
};

export default EditorNavigation;