/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2022 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import { Box, Flex, Embed } from "@theme-ui/components";
import { useRef, useState } from "react";
import { EmbedAlignmentOptions, EmbedAttributes } from "./embed";
import { SelectionBasedReactNodeViewProps } from "../react";
import { DesktopOnly } from "../../components/responsive";
import { ToolbarGroup } from "../../toolbar/components/toolbar-group";
import { Icon, Icons } from "../../toolbar";
import { Resizer } from "../../components/resizer";

export function EmbedComponent(
  props: SelectionBasedReactNodeViewProps<
    EmbedAttributes & EmbedAlignmentOptions
  >
) {
  const { editor, updateAttributes, selected, node } = props;
  const [isLoading, setIsLoading] = useState(true);
  const embedRef = useRef<HTMLIFrameElement>(null);
  const { src, width, height, align } = node.attrs;

  return (
    <>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent:
            align === "center" ? "center" : align === "left" ? "start" : "end",
          position: "relative"
        }}
      >
        <Resizer
          handleColor="primary"
          editor={editor}
          selected={selected}
          width={width}
          height={height}
          onResize={(width, height) => {
            updateAttributes(
              {
                width,
                height
              },
              { addToHistory: true, preventUpdate: false }
            );
          }}
        >
          <Box
            sx={{
              width: "100%",
              display: editor.isEditable ? "flex" : "none",
              position: "absolute",
              top: -24,
              justifyContent: "end",
              p: "small",
              bg: editor.isEditable ? "bgSecondary" : "transparent",
              borderTopLeftRadius: "default",
              borderTopRightRadius: "default",
              borderColor: selected ? "border" : "bgSecondary",
              cursor: "pointer",
              ":hover": {
                borderColor: "border"
              }
            }}
          >
            <Icon path={Icons.dragHandle} size={"big"} />
            <DesktopOnly>
              {selected && (
                <Flex sx={{ position: "relative", justifyContent: "end" }}>
                  <Flex
                    sx={{
                      position: "absolute",
                      top: -10,
                      mb: 2,
                      alignItems: "end"
                    }}
                  >
                    <ToolbarGroup
                      editor={editor}
                      tools={[
                        "embedAlignLeft",
                        "embedAlignCenter",
                        "embedAlignRight",
                        "embedProperties"
                      ]}
                      sx={{
                        boxShadow: "menu",
                        borderRadius: "default",
                        bg: "background"
                      }}
                    />
                  </Flex>
                </Flex>
              )}
            </DesktopOnly>
          </Box>
          <Embed
            ref={embedRef}
            src={src}
            width={"100%"}
            height={"100%"}
            sx={{
              bg: "bgSecondary",
              border: selected
                ? "2px solid var(--primary)"
                : "2px solid transparent",
              borderRadius: "default"
            }}
            onLoad={() => setIsLoading(false)}
            {...props}
          />
          {isLoading && (
            <Flex
              sx={{
                position: "absolute",
                bottom: 0,
                width: "100%",
                height: "calc(100% - 20px)",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Icon path={Icons.loading} rotate size={32} color="disabled" />
            </Flex>
          )}
        </Resizer>
      </Box>
    </>
  );
}
