/*
 * Copyright 2018-2022 Elyra Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useMemo } from "react";

import { DeepPartial } from "redux";
import { ThemeProvider as StyledThemeProvider } from "styled-components";

import { Theme } from "../types";
import { CanvasOverrides } from "./styles";
import useSystemInfo from "./useSystemInfo";
import { deepmerge } from "./utils";

const defaultTheme: Omit<Theme, "mode" | "platform"> = {
  palette: {
    focus: "#528bff",
    border: "#181a1f",
    divider: "rgba(128, 128, 128, 0.35)",
    hover: "#2c313a",
    active: "rgba(255, 255, 255, 0.18)",
    tabBorder: "#e7e7e7",
    inputBorder: "transparent",
    sash: "transparent",
    primary: {
      main: "#4d78cc",
      hover: "#6087cf",
      contrastText: "#fff",
    },
    secondary: {
      main: "#353b45",
      contrastText: "#f0f0f0",
    },
    error: {
      main: "#be1100",
      contrastText: "#fff",
    },
    errorMessage: {
      main: "#be1100",
      contrastText: "#fff",
      errorBorder: "#be1100",
    },
    text: {
      icon: "#c5c5c5",
      primary: "#cccccc",
      secondary: "#abb2bf",
      bold: "#e7e7e7",
      inactive: "rgba(231, 231, 231, 0.6)",
      disabled: "rgba(215, 218, 224, 0.25)",
      link: "#3794ff",
      error: "#f48771",
    },
    background: {
      default: "#282c34",
      secondary: "#21252b",
      input: "#1b1d23",
    },
    highlight: {
      border: "rgba(255, 255, 255, 0.12)",
      hover: "rgba(128, 128, 128, 0.07)",
      focus: "rgba(128, 128, 128, 0.14)",
    },
  },
  shape: {
    borderRadius: "0px",
  },
  typography: {
    fontFamily: "-apple-system, system-ui, sans-serif",
    fontWeight: "normal",
    fontSize: "13px",
  },
};

function mergeThemes(systemInfo: {
  mode: "dark" | "light";
  platform: "mac" | "win" | "other";
}) {
  return (overides: Partial<Theme>): Theme => {
    return deepmerge<Theme>(
      { ...defaultTheme, ...systemInfo },
      overides as DeepPartial<Theme>
    );
  };
}

const ThemeProvider: React.FC<{ theme: DeepPartial<Theme> }> = ({
  theme,
  children,
}) => {
  return (
    <StyledThemeProvider theme={theme as any}>{children}</StyledThemeProvider>
  );
};

export const InternalThemeProvider: React.FC = ({ children }) => {
  const systemInfo = useSystemInfo();
  const theme = useMemo(() => mergeThemes(systemInfo), [systemInfo]);

  return (
    <StyledThemeProvider theme={theme}>
      <CanvasOverrides />
      {children}
    </StyledThemeProvider>
  );
};

export function createTheme(theme: DeepPartial<Theme>) {
  return theme;
}

export default ThemeProvider;