import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
import { ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
import { WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
import { CamelCasedPropertiesDeep } from 'src/application/models';
import { ColorMappingV3, ColorNames, colorVar } from 'src/application/models/colorsConfigV3';
import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';

import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
import { CustomerServiceType } from 'src/types/customerService';
import { ConfigVersionEnum, WidgetTypeV3 } from '../typesV3';

const mockImages = [
  {
    src: 'https://picsum.photos/400/600',
    alt: 'Image 1',
  },
  {
    src: 'https://picsum.photos/400/600',
    alt: 'Image 2',
  },
  {
    src: 'https://picsum.photos/400/600',
    alt: 'Image 3',
  },
  {
    src: 'https://picsum.photos/400/600',
    alt: 'Image 4',
  },
];

export const mockV3ColorsConfig: CamelCasedPropertiesDeep<ColorMappingV3> = {
  textPrimary: '#021414',
  textSecondary: '#666666',
  textAccent: '#478D87',
  textLink: '#042E2C',
  textLight: '#FFFFFF',
  backgroundPrimary: '#1F5F51',
  backgroundSecondary: '#F9F6EA',
  backgroundTertiary: '#EEECDD',
  backgroundDark: '#021414',
  backgroundLight: '#FFFFFF',
  borderLight: '#E6E7E7',
  borderMedium: '#B3B8B8',
  borderDark: '#021414',
  accentPrimary: '#1F5F51',
  accentSecondary: '#AE8659',
};

export const mockV3FrontendConfig: FrontendConfigV3 = {
  uiConfigs: {
    version: ConfigVersionEnum.V3,
    shortName: 'Envive AI',
    lookAndFeel: {
      theme: Theme.STANDARD,
      agentName: 'Envive AI',
      chatHeaderLogoDarkSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
      chatHeaderLogoLightSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg',
      widgetLogoSrc: 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg',
      hideWidgetLogo: false,
      elementRadius: 8,
      imageAspectRatio: '1/1',
      buttonColors: {
        lightButtonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
        lightButtonIconColor: colorVar(ColorNames.AccentPrimary),
        darkButtonBackgroundColor: colorVar(ColorNames.BackgroundDark),
        darkButtonIconColor: colorVar(ColorNames.AccentPrimary),
      },
      typography: {
        titleFontFamily: 'Poppins',
        headerFontFamily: 'Poppins',
        bodyFontFamily: 'Inter Variable',
        fontSize: {
          t1: '32px',
          t2: '28px',
          t3: '24px',
          h1: '20px',
          h2: '16px',
          h3: '14px',
          b1: '20px',
          b2: '16px',
          b3: '14px',
          b4: '12px',
          b5: '10px',
          l1: '14px',
          l2: '12px',
        },
        fontWeight: {
          rg: '400',
          md: '500',
          sb: '600',
        },
        letterSpacing: {
          '0': '0em',
          'wide-1': '1px',
        },
        lineHeight: {
          '124': 1.24,
          '120': 1.2,
          '118': 1.18,
          '116': 1.16,
          '114': 1.14,
          '148': 1.48,
          '140': 1.4,
          '128': 1.28,
          '130': 1.3,
          '133': 1.33,
        },
      },
    },
    floatingButton: {
      position: FloatingButtonLocation.BOTTOM_RIGHT,
      backgroundColor: ColorNames.BackgroundPrimary,
      mode: 'dark',
      showOption: 'always',
      style: 'attached',
      iconSVGSrc: '',
    },
    floatingChat: {
      headerBackgroundColor: ColorNames.BackgroundPrimary,
      headerMode: ChatHeaderVariant.DARK,
      welcomeMessageIconColor: SparkleIconColor.ACCENT_PRIMARY,
      showVerifiedBuyer: true,
      userQueryInputEnabled: true,
      showEnviveLogo: true,
      ignoreFirstModelResponse: false,
      neverShowSingleProductCards: false,
      welcomeMessageTitle: 'Welcome to Envive AI',
      welcomeMessageText:
        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
    },
    customerServiceIntegration: {
      provider: CustomerServiceType.unsupported,
      enabled: false,
      suppressMerchantButton: false,
    },
    singlePageApplicationSettings: {
      enabled: false,
      refreshInterval: 1000,
    },
  },
  pageVariants: [],
  mountingConfigs: {},
  widgetConfigs: {
    'prompt-carousel-test-light-widget': {
      widgetConfigId: 'prompt-carousel-test-light-widget',
      contentId: 'prompt-carousel-test-light-widget',
      type: WidgetTypeV3.PromptCarouselV3,

      promptButtonType: PromptButtonVariant.LIGHT,
      boldFirstButton: false,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      animationSpeed: AnimationSpeed.FAST,
    },
    'prompt-carousel-test-dark-widget': {
      widgetConfigId: 'prompt-carousel-test-dark-widget',
      contentId: 'prompt-carousel-test-dark-widget',
      type: WidgetTypeV3.PromptCarouselV3,

      promptButtonType: PromptButtonVariant.DARK,
      boldFirstButton: false,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      animationSpeed: AnimationSpeed.FAST,
    },
    'titled-prompt-carousel-test-light-widget': {
      widgetConfigId: 'titled-prompt-carousel-test-light-widget',
      contentId: 'titled-prompt-carousel-test-light-widget',
      type: WidgetTypeV3.TitledPromptCarouselV3,

      promptButtonType: PromptButtonVariant.LIGHT,
      boldFirstButton: false,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      animationSpeed: AnimationSpeed.FAST,
    },
    'titled-prompt-carousel-test-dark-widget': {
      widgetConfigId: 'titled-prompt-carousel-test-dark-widget',
      contentId: 'titled-prompt-carousel-test-dark-widget',
      type: WidgetTypeV3.TitledPromptCarouselV3,

      promptButtonType: PromptButtonVariant.DARK,
      boldFirstButton: false,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      animationSpeed: AnimationSpeed.FAST,
    },
    'social-proof-test-widget-four-grid': {
      widgetConfigId: 'social-proof-test-widget-four-grid',
      contentId: 'social-proof-test-widget-four-grid',
      type: WidgetTypeV3.SocialProofV3,

      imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
      kind: WidgetKind.STATIC,
      variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
      primaryButtonVariant: PromptButtonVariant.DARK,
      secondaryButtonVariant: PromptButtonVariant.LIGHT,
      images: mockImages,
    },
    'social-proof-test-widget-single': {
      widgetConfigId: 'social-proof-test-widget-single',
      contentId: 'social-proof-test-widget-single',
      type: WidgetTypeV3.SocialProofV3,

      imageGalleryLayout: ImageGalleryLayout.SINGLE,
      kind: WidgetKind.STATIC,
      variant: WidgetWrapperVariant.CARD_NO_BORDER,
      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
      primaryButtonVariant: PromptButtonVariant.DARK,
      secondaryButtonVariant: PromptButtonVariant.LIGHT,
      images: mockImages,
    },
    'social-proof-test-widget-four-horizontal': {
      widgetConfigId: 'social-proof-test-widget-four-horizontal',
      contentId: 'social-proof-test-widget-four-horizontal',
      type: WidgetTypeV3.SocialProofV3,

      imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
      kind: WidgetKind.STATIC,
      variant: WidgetWrapperVariant.CARD_WITH_BORDER,
      promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
      primaryButtonVariant: PromptButtonVariant.DARK,
      secondaryButtonVariant: PromptButtonVariant.LIGHT,
      images: mockImages,
    },
    'typing-animation-test-light-widget': {
      widgetConfigId: 'typing-animation-test-light-widget',
      contentId: 'typing-animation-test-light-widget',
      type: WidgetTypeV3.TypingAnimationV3,
      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
      promptButtonType: PromptButtonVariant.LIGHT,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      showTextField: true,
    },
    'typing-animation-test-dark-widget': {
      widgetConfigId: 'typing-animation-test-dark-widget',
      contentId: 'typing-animation-test-dark-widget',
      type: WidgetTypeV3.TypingAnimationV3,
      widgetVariant: WidgetWrapperVariant.CARD_WITH_BORDER,
      promptButtonType: PromptButtonVariant.DARK,
      promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
      showTextField: true,
    },
    'prompt-button-carousel-with-image-test-widget': {
      widgetConfigId: 'prompt-button-carousel-with-image-test-widget',
      contentId: 'prompt-button-carousel-with-image-test-widget',
      type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
      promptButtonType: PromptButtonVariant.LIGHT,
      image: mockImages[0],
      hideTextField: false,
    },
    'product-card-test-widget': {
      widgetConfigId: 'product-card-test-widget',
      contentId: 'product-card-test-widget',
      type: WidgetTypeV3.ProductCardV3,
      promptButtonType: PromptButtonVariant.LIGHT,
      italicizeHeadline: false,
      fallbackColor: '#F9F6EA',
      imageSrc:
        'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
    },
    'full-page-sales-agent-widget': {
      widgetConfigId: 'full-page-sales-agent-widget',
      contentId: 'full-page-sales-agent-widget',
      type: WidgetTypeV3.FullPageSalesAgentV3,
      autoHeight: true,
    },
  },
};
