import { CSSProperties } from 'react';
import { PaletteColorOptions, TypographyStyleOptions, ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
import { darkCategoricalColor, lightCategoricalColor, color } from './colors.cjs';
import { CodeBlockProps } from '../components/CodeBlocks.cjs';
import { MarkdownProps } from '../components/Markdown.cjs';
import { ColumnResizerProps } from '../components/ColumnResizer.cjs';
import { ContentProps } from '../components/Content.cjs';
import { CopyToClipboardButtonProps } from '../components/CopyToClipboardButton.cjs';
import { ErrorBoundaryProps } from '../components/ErrorBoundary.cjs';
import { FileInputButtonProps } from '../components/FileInputButton.cjs';
import { FileInputProps } from '../components/FileInput.cjs';
import { HeaderProps } from '../components/header/Header.cjs';
import { KeyboardProps } from '../components/Keyboard.cjs';
import { ResizableTableContainerProps } from '../components/ResizableTableContainer.cjs';
import { ShareOnFacebookButtonProps } from '../components/social/ShareOnFacebookButton.cjs';
import { ShareOnLinkedInButtonProps } from '../components/social/ShareOnLinkedInButton.cjs';
import { ShareOnTwitterButtonProps } from '../components/social/ShareOnTwitterButton.cjs';
import { SnackbarListProps } from '../components/SnackbarList.cjs';
import { TextTruncatorProps } from '../components/TextTruncator.cjs';
import '@emotion/styled';
import '@mui/system';
import '@mui/material';
import 'react-markdown';
import 'remark-gfm';
import 'react/jsx-runtime';
import '../components/SnackbarContext.cjs';
import '@mui/material/Typography';

// this file provides overrides for MUI theme types. the overrides allow us to add our own colors and variants to MUI components.


type ColorType = typeof color;

interface VarnishColors extends ColorType {}

interface VarnishMuiTheme {
    color: VarnishColors;
    darkCategoricalColor: typeof darkCategoricalColor;
    lightCategoricalColor: typeof lightCategoricalColor;
}

interface VarnishTypographyVariants {
    monospace: true;
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides extends VarnishTypographyVariants {}
}

interface HoveredFillStroke {
    fill: string;
    stroke: string;
}

interface OpacityDefaultReversed {
    default: string;
    reversed: string;
}

interface FillStrokeContrast {
    fill: string;
    stroke: string;
    contrast: string;
}

interface FillContrast {
    fill: string;
    contrast: string;
}

interface VarnishPaletteColorExtensions {
    reversed?: string;
    hovered?: HoveredFillStroke;
    stroke?: string;
    contrastReversed?: string;
    text?: string; // primary only
}

interface VarnishBackgroundExtensions {
    reversed?: string;
    opacity4?: OpacityDefaultReversed;
    opacity10?: OpacityDefaultReversed;
    opacity20?: OpacityDefaultReversed;
    opacity30?: OpacityDefaultReversed;
    opacity40?: OpacityDefaultReversed;
    opacity50?: OpacityDefaultReversed;
    opacity60?: OpacityDefaultReversed;
    opacity70?: OpacityDefaultReversed;
    opacity80?: OpacityDefaultReversed;
    opacity90?: OpacityDefaultReversed;
}

interface VarnishTextExtensions {
    reversed?: string;
    placeholder?: string;
    placeholder55?: string;
    error?: string;
}

interface VarnishStrokeTokens {
    opacity4: OpacityDefaultReversed;
    opacity10: OpacityDefaultReversed;
    opacity20: OpacityDefaultReversed;
    opacity30: OpacityDefaultReversed;
    opacity40: OpacityDefaultReversed;
    opacity50: OpacityDefaultReversed;
    opacity60: OpacityDefaultReversed;
    opacity70: OpacityDefaultReversed;
    opacity80: OpacityDefaultReversed;
    opacity90: OpacityDefaultReversed;
    opacity100: OpacityDefaultReversed;
    disabled: { default: string };
}

interface VarnishIconTokens {
    default: string;
    reversed: string;
    disabled: string;
    error: string;
    opacity50: string;
    opacity55?: string;
    on: string;
    opacity30: string;
}

interface VarnishLinksTokens {
    default: string;
    reversed: string;
    hovered: {
        default: string;
        reversed: string;
    };
}

interface ElementStateGroup {
    fill: string;
    hovered: HoveredFillStroke;
    contrast: string;
    stroke: string;
    contrastReversed: string;
}

interface VarnishOverlayTokens {
    background: string;
    header: string;
    footer: string;
    contentContrastMed: string;
    contentContrastHigh: string;
    contentContrastLow: string;
    contentContrastHighGradient: string;
}

interface VarnishElementsTokens {
    disabled: ElementStateGroup;
    default: ElementStateGroup;
    faded: ElementStateGroup;
    reversed: ElementStateGroup;
    overlay: VarnishOverlayTokens;
}

interface FormCheckboxTokens {
    stroke: string;
    fill: string;
    hovered: HoveredFillStroke;
    error: FillStrokeContrast;
    checked: FillContrast;
    disabled: FillStrokeContrast;
}

interface FormInputTokens {
    stroke: string;
    fill: string;
    contrast: string;
    hovered: HoveredFillStroke;
    error: FillStrokeContrast;
    disabled: FillStrokeContrast;
}

interface FormRadioTokens {
    stroke: string;
    fill: string;
    hovered: HoveredFillStroke;
    error: FillStrokeContrast;
    checked: FillContrast;
    disabled: FillStrokeContrast;
}

interface FormSwitchTokens {
    stroke: string;
    fill: string;
    hovered: HoveredFillStroke;
    error: FillStrokeContrast;
    checked: FillContrast;
    disabled: FillStrokeContrast;
}

interface FormSliderTokens {
    stroke: string;
    fill: string;
    hover: HoveredFillStroke;
}

interface VarnishFormTokens {
    checkbox: FormCheckboxTokens;
    input: FormInputTokens;
    radio: FormRadioTokens;
    switch: FormSwitchTokens;
    slider: FormSliderTokens;
}

interface VarnishButtonTokens {
    text: {
        hovered: {
            fill: string;
        };
    };
}

// applying tertiary and default color variants to common components
declare module '@mui/material' {
    interface BadgePropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface ButtonPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface ButtonOwnProps {
        shape?: 'rounded' | 'box';
    }
    interface IconButtonPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface IconButtonOwnProps {
        variant?: 'contained' | 'outlined' | 'text';
        shape?: 'rounded' | 'box';
    }
    interface IconButtonPropsSizeOverrides {
        large: true;
    }
    interface CheckboxPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface CheckboxPropsSizeOverrides {
        large: true;
    }
    interface ChipPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface ChipOwnProps {
        shape?: 'rounded' | 'box';
    }
    interface ChipPropsSizeOverrides {
        xsmall: true;
        large: true;
    }
    interface CircularProgressPropsColorOverrides {
        tertiary: true;
    }
    interface LinearProgressPropsColorOverrides {
        tertiary: true;
    }
    interface RadioPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface RadioPropsSizeOverrides {
        large: true;
    }
    interface SliderPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface SliderPropsSizeOverrides {
        large: true;
    }
    interface SwitchPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface SwitchPropsSizeOverrides {
        large: true;
    }
    interface LinkPropsColorOverrides {
        tertiary: true;
        default: true;
    }
    interface LinkOwnProps {
        size?: 'small' | 'medium' | 'large';
    }
    interface FormControlPropsSizeOverrides {
        large: true;
    }
    interface InputLabelPropsSizeOverrides {
        large: true;
    }
    interface InputBasePropsSizeOverrides {
        large: true;
    }
    interface TextFieldPropsSizeOverrides {
        large: true;
    }
    interface SelectPropsSizeOverrides {
        large: true;
    }
    interface AvatarOwnProps {
        size?: 'small' | 'medium' | 'large';
        color?: 'default' | 'primary' | 'secondary' | 'tertiary';
        shape?: 'square' | 'circle';
    }
}

declare module '@mui/material/styles' {
    interface PaletteColor extends VarnishPaletteColorExtensions {}

    interface SimplePaletteColorOptions extends VarnishPaletteColorExtensions {}

    interface TypeBackground extends VarnishBackgroundExtensions {}

    interface TypeText extends VarnishTextExtensions {}

    // allow configuration using `createTheme`
    interface ThemeOptions extends DeepPartial<VarnishMuiTheme> {}

    interface PaletteOptions {
        tertiary?: PaletteColorOptions;
        default?: PaletteColorOptions;
        stroke?: VarnishStrokeTokens;
        icon?: VarnishIconTokens;
        links?: VarnishLinksTokens;
        elements?: VarnishElementsTokens;
        form?: VarnishFormTokens;
        button?: VarnishButtonTokens;
    }

    interface Palette {
        tertiary: PaletteColor;
        default: PaletteColor;
        stroke: VarnishStrokeTokens;
        icon: VarnishIconTokens;
        links: VarnishLinksTokens;
        elements: VarnishElementsTokens;
        form: VarnishFormTokens;
        button: VarnishButtonTokens;
    }

    interface Theme extends VarnishMuiTheme {}

    interface CssVarsPalette {
        tertiary: PaletteColor;
        default: PaletteColor;
        stroke: VarnishStrokeTokens;
        icon: VarnishIconTokens;
        links: VarnishLinksTokens;
        elements: VarnishElementsTokens;
        form: VarnishFormTokens;
        button: VarnishButtonTokens;
    }

    // Varnish custom typography extensions
    interface TypographyVariants {
        monospace: CSSProperties;
    }

    interface TypographyVariantsOptions {
        monospace?: TypographyStyleOptions;
        fontWeightSemiBold?: number;
    }

    interface Shape {
        borderRadiusXs: string;
        borderRadiusSm: string;
        borderRadiusMd: string;
        borderRadiusLg: string;
        borderRadiusXl: string;

        borderRadiusFull: string;
    }

    interface ShapeOptions {
        borderRadiusXs?: string;
        borderRadiusSm?: string;
        borderRadiusMd?: string;
        borderRadiusLg?: string;
        borderRadiusXl?: string;

        borderRadiusFull?: string;
    }

    // Varnish custom component theme integration
    interface ComponentNameToClassKey {
        MuiCodeBlock: 'root';
        MuiColumnResizer: 'root';
        MuiContent: 'root';
        MuiCopyToClipboardButton: 'root';
        MuiErrorBoundary: 'debugInfo';
        MuiFileInput: 'root';
        MuiFileInputButton: 'root' | 'hiddenInput';
        MuiHeader: 'root' | 'container' | 'logo' | 'slotsArea' | 'nav' | 'search' | 'action';
        MuiKeyboard: 'root';
        MuiMarkdown: 'root';
        MuiResizableTableContainer: 'root';
        MuiShareOnFacebookButton: 'root';
        MuiShareOnLinkedInButton: 'root';
        MuiShareOnTwitterButton: 'root';
        MuiSnackbarList: 'root';
        MuiTextTruncator: 'root';
    }

    interface ComponentsPropsList {
        MuiCodeBlock: Partial<CodeBlockProps>;
        MuiColumnResizer: Partial<ColumnResizerProps>;
        MuiContent: Partial<ContentProps>;
        MuiCopyToClipboardButton: Partial<CopyToClipboardButtonProps>;
        MuiErrorBoundary: Partial<ErrorBoundaryProps>;
        MuiFileInput: Partial<FileInputProps>;
        MuiFileInputButton: Partial<FileInputButtonProps>;
        MuiHeader: Partial<HeaderProps>;
        MuiKeyboard: Partial<KeyboardProps>;
        MuiMarkdown: Partial<MarkdownProps>;
        MuiResizableTableContainer: Partial<ResizableTableContainerProps>;
        MuiShareOnFacebookButton: Partial<ShareOnFacebookButtonProps>;
        MuiShareOnLinkedInButton: Partial<ShareOnLinkedInButtonProps>;
        MuiShareOnTwitterButton: Partial<ShareOnTwitterButtonProps>;
        MuiSnackbarList: Partial<SnackbarListProps>;
        MuiTextTruncator: Partial<TextTruncatorProps>;
    }

    interface Components {
        MuiCodeBlock?: {
            defaultProps?: ComponentsPropsList['MuiCodeBlock'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiCodeBlock'];
            variants?: ComponentsVariants['MuiCodeBlock'];
        };
        MuiColumnResizer?: {
            defaultProps?: ComponentsPropsList['MuiColumnResizer'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiColumnResizer'];
            variants?: ComponentsVariants['MuiColumnResizer'];
        };
        MuiContent?: {
            defaultProps?: ComponentsPropsList['MuiContent'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiContent'];
            variants?: ComponentsVariants['MuiContent'];
        };
        MuiCopyToClipboardButton?: {
            defaultProps?: ComponentsPropsList['MuiCopyToClipboardButton'];
            styleOverrides?: ComponentsOverrides<
                Omit<Theme, 'components'>
            >['MuiCopyToClipboardButton'];
            variants?: ComponentsVariants['MuiCopyToClipboardButton'];
        };
        MuiErrorBoundary?: {
            defaultProps?: ComponentsPropsList['MuiErrorBoundary'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiErrorBoundary'];
            variants?: ComponentsVariants['MuiErrorBoundary'];
        };
        MuiFileInput?: {
            defaultProps?: ComponentsPropsList['MuiFileInput'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiFileInput'];
            variants?: ComponentsVariants['MuiFileInput'];
        };
        MuiFileInputButton?: {
            defaultProps?: ComponentsPropsList['MuiFileInputButton'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiFileInputButton'];
            variants?: ComponentsVariants['MuiFileInputButton'];
        };
        MuiHeader?: {
            defaultProps?: ComponentsPropsList['MuiHeader'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiHeader'];
            variants?: ComponentsVariants['MuiHeader'];
        };
        MuiKeyboard?: {
            defaultProps?: ComponentsPropsList['MuiKeyboard'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiKeyboard'];
            variants?: ComponentsVariants['MuiKeyboard'];
        };
        MuiMarkdown?: {
            defaultProps?: ComponentsPropsList['MuiMarkdown'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiMarkdown'];
            variants?: ComponentsVariants['MuiMarkdown'];
        };
        MuiResizableTableContainer?: {
            defaultProps?: ComponentsPropsList['MuiResizableTableContainer'];
            styleOverrides?: ComponentsOverrides<
                Omit<Theme, 'components'>
            >['MuiResizableTableContainer'];
            variants?: ComponentsVariants['MuiResizableTableContainer'];
        };
        MuiShareOnFacebookButton?: {
            defaultProps?: ComponentsPropsList['MuiShareOnFacebookButton'];
            styleOverrides?: ComponentsOverrides<
                Omit<Theme, 'components'>
            >['MuiShareOnFacebookButton'];
            variants?: ComponentsVariants['MuiShareOnFacebookButton'];
        };
        MuiShareOnLinkedInButton?: {
            defaultProps?: ComponentsPropsList['MuiShareOnLinkedInButton'];
            styleOverrides?: ComponentsOverrides<
                Omit<Theme, 'components'>
            >['MuiShareOnLinkedInButton'];
            variants?: ComponentsVariants['MuiShareOnLinkedInButton'];
        };
        MuiShareOnTwitterButton?: {
            defaultProps?: ComponentsPropsList['MuiShareOnTwitterButton'];
            styleOverrides?: ComponentsOverrides<
                Omit<Theme, 'components'>
            >['MuiShareOnTwitterButton'];
            variants?: ComponentsVariants['MuiShareOnTwitterButton'];
        };
        MuiSnackbarList?: {
            defaultProps?: ComponentsPropsList['MuiSnackbarList'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiSnackbarList'];
            variants?: ComponentsVariants['MuiSnackbarList'];
        };
        MuiTextTruncator?: {
            defaultProps?: ComponentsPropsList['MuiTextTruncator'];
            styleOverrides?: ComponentsOverrides<Omit<Theme, 'components'>>['MuiTextTruncator'];
            variants?: ComponentsVariants['MuiTextTruncator'];
        };
    }
}

declare module '@mui/material/Select' {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface BaseSelectProps<Value = unknown> {
        shape?: 'rounded' | 'box';
    }
}

declare module '@mui/material/TextField' {
    interface BaseTextFieldProps {
        shape?: 'rounded' | 'box';
    }
}

declare module '@mui/material/Tooltip' {
    interface TooltipProps {
        shape?: 'rounded' | 'box';
    }
}

declare module '@mui/material/SnackbarContent' {
    interface SnackbarContentProps {
        shape?: 'rounded' | 'box';
    }
}

export type { VarnishColors, VarnishMuiTheme, VarnishTypographyVariants };