import * as React from "react";
import { createContext, useContext } from "@wordpress/element";
import { Config, Settings } from "../types";
import config from "./config";

// Default settings
export const defaults: Settings = {
  apiKey: "my-api-key",
  apiUrl: "https://api.justwatch.com",
  previewUrl: "https://widget.justwatch.com/inline_widget",
  locale: "en_US",
  theme: "light",
  maxOffers: 8,
  offerLabel: "price",
  scale: 1,
  brandedLink: false,
  brandedLinkTemplate: "Source: {{justwatch}}",
  noOffersMessage: "",
  titleNotFoundMessage: "",
};

// Create context with default values
export const JustwatchContext = createContext<Settings>({
  ...defaults,
});

// Define props for the provider
interface JustwatchProviderProps extends Partial<Settings> {
  children: React.ReactNode; // Use ReactNode for children
}

// Provider component
export const JustwatchProvider: React.FC<JustwatchProviderProps> = ({ children, ...props }) => {
  const { settings } = config || {} as Config;
  const mergedProps = { ...defaults, ...settings, ...props };

  // Combine context value
  const contextValue: Settings = mergedProps;

  return (
    <JustwatchContext.Provider value={contextValue}>
      {children}
    </JustwatchContext.Provider>
  );
};

// Hook to use context
export const useJustwatch = (): Settings => {
  return useContext(JustwatchContext);
};

export default JustwatchContext;