import React, {PropsWithChildren, createContext} from 'react';
import {DimensionValue, TextStyle} from 'react-native';

const ThemeContext = createContext<Theme | undefined>(undefined);

export const useTheme = (): Theme | undefined => {
  const theme = React.useContext(ThemeContext);
  // if (!theme) {
  //   throw new Error("useTheme must be used within a ThemeProvider");
  // }
  return theme;
};

export interface Theme {
  radio?: {
    type: 'default' | 'toggle'; // shows if radio button is html type default button or toggle button similar to this https://mui.com/material-ui/react-toggle-button/
    activeSelectionColor: string; // color of selected item
    baseColor: string; // color default
  };
  input?: {
    textColor?: string;
    roundness?: number;
    showInputLabels?: boolean; // to show or not show input labels of a field
    type: 'default' | 'outlined'; // input border type
    outlineColor?: string; // if outlined input, the outline color of input
    minWidth?: DimensionValue;
    textAlign?: string;
    fontWeight?: string;
    height?: number;
    fontSize?: number;
    fontFamily?: string;
  };
  submit?: {
    customText?: string;
    styles?: {
      background: string; // background color of the button
      border: number; // border radius
    };
  };
  general?: {
    hideTitles?: boolean;
  };
  prefixSuffix?: TextStyle;
}

export type ThemeProps = {
  theme: Theme;
} & PropsWithChildren;

export const ThemeProvider = ({children, theme}: ThemeProps) => {
  return (
    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
  );
};