import  { DefaultTheme, ThemeProvider as MyThemeProvider } from 'styled-components';
import * as React from 'react';

declare module 'styled-components' {
    export interface DefaultTheme {
        colorPalette: {
            type?: 'light' | 'dark';
            primary: {
                light?: string;
                main: string;
                dark?: string;
                fontColor?: string;
            }
            secondary?: {
                light?: string;
                main: string;
                dark?: string;
                fontColor?: string;
            };  
            tertiary?: {
                light?: string;
                main: string;
                dark?: string;
                fontColor?: string;
            };  
            quaternary?: {
                light?: string;
                main: string;
                dark?: string;
                fontColor?: string;
            };  
            quinary?: {
                light?: string;
                main: string;
                dark?: string;
                fontColor?: string;
            }
        }  
    }
}

export type Theme = DefaultTheme;
export type Colors = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
export type Variants = 'contained' | 'outlined' | 'transparent';
export type Sizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export type Positions = 'left' | 'right' | 'top' | 'bottom';
export type StyleTypes = 'error' | 'warning' | 'success' | 'info';

interface Props {
    type?: 'light' | 'dark';
    theme?: Theme;
    lightDarkMode?: boolean;
    themes?: Theme[];
    children: React.ReactNode;
}

const defaultTheme = {
    colorPalette: {
        type: 'dark',
        primary: {
            light: '#a9dddd',
            main: '#0fbdbd',
            dark: '#0a4444',
            fontColor: '#fff',
        },
    },
} as Theme;


export const ThemeProvider = (props: Props) => {
    const myTheme = () => {
        let myTheme = undefined as Theme | undefined;
        if(props.lightDarkMode && props.themes){
            myTheme = props.themes.find(theme => theme.colorPalette.type === props.type);
        } else{
            myTheme = props.theme;
        } 
        if(myTheme){
            return myTheme;
        }
        return defaultTheme;
    }
    return (
        <MyThemeProvider
            theme={myTheme()}
        >
            {props.children}
        </MyThemeProvider>
    );
};