import React, { ReactNode } from 'react';
import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
import { useNewOrgConfig } from 'src/hooks/NewOrgConfig';
import { CamelCasedPropertiesDeep } from 'src/application/models/utilityTypes';
import { ColorMapping } from '../types';
import {
  AspectRatioCSSVar,
  BorderRadiusCSSVar,
  ButtonColorsVars,
  ColorsNamesVars,
  ConfigVersionEnum,
  FontFamilyCSSVar,
  FontSizeCSSVar,
  FontWeightCSSVar,
  LetterSpacingCSSVar,
  LineHeightCSSVar,
  ThemeCSSVar,
} from '../typesV3';

interface EnviveCssProviderProps {
  children: ReactNode;
}

export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
  const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();

  const configVersion = frontendConfig?.uiConfigs?.version;

  let merchantThemeCss = `* {}`;
  if (colorsConfig && !loading && configVersion !== ConfigVersionEnum.V3) {
    const colorConfigV2 = colorsConfig as CamelCasedPropertiesDeep<ColorMapping>;
    merchantThemeCss = `
* {
  --spiffy-colors-text-primary: ${colorConfigV2.textPrimary};
  --spiffy-colors-text-secondary: ${colorConfigV2.textSecondary};
  --spiffy-colors-text-accent: ${colorConfigV2.textAccent};
  --spiffy-colors-text-link: ${colorConfigV2.textLink};
  --spiffy-colors-text-light: ${colorConfigV2.textLight};
  --spiffy-colors-background-primary: ${colorConfigV2.backgroundPrimary};
  --spiffy-colors-background-secondary: ${colorConfigV2.backgroundSecondary};
  --spiffy-colors-background-secondary-dark: ${colorConfigV2.backgroundSecondaryDark};
  --spiffy-colors-background-tertiary: ${colorConfigV2.backgroundTertiary};
  --spiffy-colors-background-dark: ${colorConfigV2.backgroundDark};
  --spiffy-colors-background-light: ${colorConfigV2.backgroundLight};
  --spiffy-colors-background-saturated: ${colorConfigV2.backgroundSaturated};
  --spiffy-colors-border-light: ${colorConfigV2.borderLight};
  --spiffy-colors-border-medium: ${colorConfigV2.borderMedium};
  --spiffy-colors-border-dark: ${colorConfigV2.borderDark};
  --spiffy-colors-border-outline: ${colorConfigV2.borderOutline};
  --spiffy-colors-accent-primary: ${colorConfigV2.accentPrimary};
  --spiffy-colors-accent-secondary: ${colorConfigV2.accentSecondary};
}`;
  } else if (colorsConfig && frontendConfig && !loading && configVersion === ConfigVersionEnum.V3) {
    const configV3 = frontendConfig as FrontendConfigV3;
    merchantThemeCss = `
* {
  --${ColorsNamesVars.TextPrimary}: ${colorsConfig.textPrimary};
  --${ColorsNamesVars.TextSecondary}: ${colorsConfig.textSecondary};
  --${ColorsNamesVars.TextAccent}: ${colorsConfig.textAccent};
  --${ColorsNamesVars.TextLink}: ${colorsConfig.textLink};
  --${ColorsNamesVars.TextLight}: ${colorsConfig.textLight};
  --${ColorsNamesVars.BackgroundPrimary}: ${colorsConfig.backgroundPrimary};
  --${ColorsNamesVars.BackgroundSecondary}: ${colorsConfig.backgroundSecondary};
  --${ColorsNamesVars.BackgroundTertiary}: ${colorsConfig.backgroundTertiary};
  --${ColorsNamesVars.BackgroundDark}: ${colorsConfig.backgroundDark};
  --${ColorsNamesVars.BackgroundLight}: ${colorsConfig.backgroundLight};
  --${ColorsNamesVars.BorderLight}: ${colorsConfig.borderLight};
  --${ColorsNamesVars.BorderMedium}: ${colorsConfig.borderMedium};
  --${ColorsNamesVars.BorderDark}: ${colorsConfig.borderDark};
  --${ColorsNamesVars.AccentPrimary}: ${colorsConfig.accentPrimary};
  --${ColorsNamesVars.AccentSecondary}: ${colorsConfig.accentSecondary};

  --${ButtonColorsVars.LightButtonBackgroundColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.lightButtonBackgroundColor};
  --${ButtonColorsVars.LightButtonIconColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.lightButtonIconColor};
  --${ButtonColorsVars.DarkButtonBackgroundColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.darkButtonBackgroundColor};
  --${ButtonColorsVars.DarkButtonIconColor}: ${configV3.uiConfigs?.lookAndFeel?.buttonColors?.darkButtonIconColor};

  --${FontFamilyCSSVar.Title}: ${configV3.uiConfigs?.lookAndFeel?.typography?.titleFontFamily};
  --${FontFamilyCSSVar.Header}: ${configV3.uiConfigs?.lookAndFeel?.typography?.headerFontFamily};
  --${FontFamilyCSSVar.Body}: ${configV3.uiConfigs?.lookAndFeel?.typography?.bodyFontFamily};

  --${FontSizeCSSVar.T1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t1};
  --${FontSizeCSSVar.T2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t2};
  --${FontSizeCSSVar.T3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.t3};
  --${FontSizeCSSVar.H1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h1};
  --${FontSizeCSSVar.H2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h2};
  --${FontSizeCSSVar.H3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.h3};
  --${FontSizeCSSVar.B1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b1};
  --${FontSizeCSSVar.B2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b2};
  --${FontSizeCSSVar.B3}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b3};
  --${FontSizeCSSVar.B4}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b4};
  --${FontSizeCSSVar.B5}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.b5};
  --${FontSizeCSSVar.L1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l1};
  --${FontSizeCSSVar.L2}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontSize?.l2};

  --${FontWeightCSSVar.RG}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.rg};
  --${FontWeightCSSVar.MD}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.md};
  --${FontWeightCSSVar.SB}: ${configV3.uiConfigs?.lookAndFeel?.typography?.fontWeight?.sb};

  --${LetterSpacingCSSVar.Tight0}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['0']};
  --${LetterSpacingCSSVar.Wide1}: ${configV3.uiConfigs?.lookAndFeel?.typography?.letterSpacing?.['wide-1']};

  --${LineHeightCSSVar.LineHeight124}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[124]};
  --${LineHeightCSSVar.LineHeight120}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[120]};
  --${LineHeightCSSVar.LineHeight118}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[118]};
  --${LineHeightCSSVar.LineHeight116}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[116]};
  --${LineHeightCSSVar.LineHeight114}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[114]};
  --${LineHeightCSSVar.LineHeight148}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[148]};
  --${LineHeightCSSVar.LineHeight140}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[140]};
  --${LineHeightCSSVar.LineHeight128}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[128]};
  --${LineHeightCSSVar.LineHeight130}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[130]};
  --${LineHeightCSSVar.LineHeight133}: ${configV3.uiConfigs?.lookAndFeel?.typography?.lineHeight?.[133]};

  --${ThemeCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.theme};

  --${AspectRatioCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.imageAspectRatio};

  --${BorderRadiusCSSVar.GlobalCustom}: ${configV3.uiConfigs?.lookAndFeel?.elementRadius}px;
}`;
  }

  const hasV3ConfigEdited = document.getElementById('merchant-css-config-edited') !== null;

  return (
    <>
      {frontendConfig ? (
        <style id="merchant-css-overrides">
          {frontendConfig.merchantOverrideCss ? `${frontendConfig.merchantOverrideCss}` : ''}
        </style>
      ) : null}
      {colorsConfig &&
      ((!hasV3ConfigEdited && configVersion === ConfigVersionEnum.V3) ||
        configVersion !== ConfigVersionEnum.V3) ? (
        <style
          id={
            configVersion === ConfigVersionEnum.V3 ? 'merchant-css-config' : 'merchant-css-colors'
          }
        >{`${merchantThemeCss}`}</style>
      ) : null}

      {children}
    </>
  );
};
