import { useState, useEffect } from "react";
import { Button, Flex, Label } from "theme-ui";

import Modal from "../components/Modal";
import TokenSettings from "../components/token/TokenSettings";
import TokenPreview from "../components/token/TokenPreview";
import LoadingOverlay from "../components/LoadingOverlay";

import { useTokenData } from "../contexts/TokenDataContext";

import { isEmpty } from "../helpers/shared";

import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { Token } from "../tokens";

type EditModalProps =  {
  isOpen: boolean,
  onDone: () => void,
  tokenId: string,
};

function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
  const { updateToken, getTokenFromDB } = useTokenData();

  const [isLoading, setIsLoading] = useState(true);
  const [token, setToken] = useState<Token>();
  useEffect(() => {
    async function loadToken() {
      setIsLoading(true);
      setToken(await getTokenFromDB(tokenId));
      setIsLoading(false);
    }

    if (isOpen && tokenId) {
      loadToken();
    } else {
      setToken(undefined);
    }
  }, [isOpen, tokenId, getTokenFromDB]);

  function handleClose() {
    setTokenSettingChanges({});
    onDone();
  }

  async function handleSave() {
    await applyTokenChanges();
    onDone();
  }

  const [tokenSettingChanges, setTokenSettingChanges] = useState<any>({});

  function handleTokenSettingsChange(key: any, value: any) {
    setTokenSettingChanges((prevChanges: any) => ({
      ...prevChanges,
      [key]: value,
    }));
  }

  async function applyTokenChanges() {
    if (token && !isEmpty(tokenSettingChanges)) {
      // Ensure size value is positive
      let verifiedChanges = { ...tokenSettingChanges };
      if ("defaultSize" in verifiedChanges) {
        verifiedChanges.defaultSize = verifiedChanges.defaultSize || 1;
      }

      await updateToken(token.id, verifiedChanges);
      setTokenSettingChanges({});
    }
  }

  const selectedTokenWithChanges = {
    ...token,
    ...tokenSettingChanges,
  };

  const layout = useResponsiveLayout();

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={handleClose}
      style={{
        content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
      }}
    >
      <Flex
        sx={{
          flexDirection: "column",
        }}
      >
        <Label pt={2} pb={1}>
          Edit token
        </Label>
        {isLoading || !token ? (
          <Flex
            sx={{
              width: "100%",
              height: layout.screenSize === "large" ? "500px" : "300px",
              position: "relative",
            }}
            bg="muted"
          >
            <LoadingOverlay />
          </Flex>
        ) : (
          <TokenPreview token={selectedTokenWithChanges} />
        )}
        <TokenSettings
          token={selectedTokenWithChanges}
          onSettingsChange={handleTokenSettingsChange}
        />
        <Button onClick={handleSave}>Save</Button>
      </Flex>
    </Modal>
  );
}

export default EditTokenModal;