'use client';

import { observer } from 'mobx-react-lite';
import React from 'react';

import { ThemeMode, useThemeContext } from '@/context/ThemeContext';
import {
  ChainIcon,
  ImageIcon,
  LockIcon,
  StemsIcon,
  UploadIcon,
  VinylIcon,
} from '@/icons';
import { Clip } from '@/state/clipStore';

import Tag, { TagVariant, tagColorCssVariables } from './Tag';

export type TagIconKey = keyof typeof TAG_ICON_MAP;

export const TAG_ICON_MAP = {
  uploaded: UploadIcon,
  stem: StemsIcon,
  full_song: VinylIcon,
  section: ImageIcon,
  part: ChainIcon,
};

export type ModelNameTagProps = {
  clipType?: string;
  modelMajorVersion?: string;
  modelName?: string;
  displayName?: string;
  textColor?: string | null;
  borderColor?: string | null;
  backgroundColor?: string | null;
  previewClipType?: 'preview' | 'lockedPreview' | undefined;
  badgeIconKey?: string | null;
};

export type Props = ModelNameTagProps & React.ComponentProps<typeof Tag>;

export function getVariantForModelName(options: {
  clipType?: string;
  modelMajorVersion?: string;
  modelName?: string;
}) {
  const { modelMajorVersion, modelName } = options || {};
  return modelMajorVersion?.toLowerCase() === 'v4.5+' ||
    modelName?.includes('bluejay')
    ? TagVariant.Auk
    : TagVariant.Standard;
}

export const ModelNameTag: React.FC<Props> = (props) => {
  const {
    clipType,
    modelName,
    modelMajorVersion,
    displayName,
    previewClipType,
    textColor,
    borderColor,
    backgroundColor,
    style: explicitStyle,
    badgeIconKey,
    ...restProps
  } = props;

  if (!displayName) return null;

  const style =
    backgroundColor || textColor || borderColor
      ? {
          ...tagColorCssVariables({
            background: backgroundColor || undefined,
            foreground: textColor || undefined,
            border: borderColor || undefined,
          }),
          ...explicitStyle,
        }
      : explicitStyle;

  const Icon = badgeIconKey
    ? TAG_ICON_MAP[badgeIconKey as TagIconKey]
    : undefined;
  return (
    <Tag variant={TagVariant.Inherit} style={style} {...restProps}>
      {previewClipType && <LockIcon />}
      {Icon && <Icon />}
      {`${displayName}`}
    </Tag>
  );
};

export const ModelNameTagClip = observer(
  (
    props: {
      clip: Clip;
      showSecondaryBadges?: boolean;
    } & Props
  ) => {
    const { clip, showSecondaryBadges, ...restProps } = props;

    const previewClipType =
      clip.preview_seconds === undefined
        ? undefined
        : clip.preview_seconds === 0
          ? 'lockedPreview'
          : 'preview';

    const { effectiveTheme } = useThemeContext();

    if (clip.metadata?.type === 'studio_export') {
      return <Tag variant={TagVariant.Studio}>Made with Studio</Tag>;
    }

    const badgeTheme =
      effectiveTheme === ThemeMode.Dark
        ? clip.metadata?.model_badges?.songrow?.dark
        : clip.metadata?.model_badges?.songrow?.light;

    return (
      <>
        <ModelNameTag
          clipType={clip.metadata?.type}
          modelMajorVersion={clip.major_model_version}
          modelName={clip.model_name}
          displayName={clip.metadata?.model_badges?.songrow?.display_name}
          textColor={
            badgeTheme?.text_color ? `#${badgeTheme.text_color}` : undefined
          }
          borderColor={
            badgeTheme?.border_color ? `#${badgeTheme.border_color}` : undefined
          }
          backgroundColor={
            badgeTheme?.background_color
              ? `#${badgeTheme.background_color}`
              : undefined
          }
          previewClipType={previewClipType}
          {...restProps}
        />
        {showSecondaryBadges &&
          clip.metadata?.secondary_badges?.map((badge: any, index: number) => {
            const secondaryBadgeTheme =
              effectiveTheme === ThemeMode.Dark ? badge.dark : badge.light;

            // skip credits refunded, handled separately in SongRow with tooltip
            if (badge.display_name === 'Credits Refunded') {
              return null;
            }

            return (
              <ModelNameTag
                key={`${badge.display_name}-${index}`}
                clipType={clip.metadata?.type}
                modelMajorVersion={clip.major_model_version}
                modelName={clip.model_name}
                displayName={badge.display_name}
                textColor={
                  secondaryBadgeTheme?.text_color
                    ? `#${secondaryBadgeTheme.text_color}`
                    : undefined
                }
                borderColor={
                  secondaryBadgeTheme?.border_color
                    ? `#${secondaryBadgeTheme.border_color}`
                    : undefined
                }
                backgroundColor={
                  secondaryBadgeTheme?.background_color
                    ? `#${secondaryBadgeTheme.background_color}`
                    : undefined
                }
                previewClipType={previewClipType}
                badgeIconKey={badge.icon_key}
              />
            );
          })}
      </>
    );
  }
);