import type { CSSProperties, ImgHTMLAttributes, Ref } from 'react';
import React from 'react';
import classNames from 'classnames';

import { Image as CoreImage, useTranslations } from '@shoptet/ui-core-web';
import type { Exact, SafeExtract, SafeOmit } from '@shoptet/utils';
import { omit, pick } from '@shoptet/utils';

import type { Size } from '../../tokens/types';
import { Icon } from '../Icon/Icon';
import { Text } from '../Typography/Text/Text';

import { dictionary } from './dictionary';

type ImageContainerProps = SafeOmit<
  ImgHTMLAttributes<HTMLImageElement>,
  'className' | 'src' | 'srcSet' | 'alt' | 'style'
>;

export interface ImageProps extends ImageContainerProps {
  /**
   * Ref for the underlying image element.
   */
  ref?: Ref<HTMLImageElement>;
  /**
   * Image source URL.
   */
  src: string | null | undefined;
  /**
   * The `srcSet` attribute for the image.
   */
  srcSet?: string | undefined;
  /**
   * Alternative text for the image. Use an empty string for decorative images.
   */
  alt: string;
  /**
   * Custom aspect ratio for the fixed layout.
   * @default '3 / 2'
   */
  aspectRatio?: `${number} / ${number}` | number;
  /**
   * Whether the image should use its intrinsic aspect ratio.
   * @default false
   */
  responsive?: boolean;
  /**
   * Controls how the image fits inside its box.
   * @default 'contain'
   */
  fit?: 'contain' | 'cover';
  /**
   * Sets predefined image width.
   * @default 'md'
   */
  size?: SafeExtract<Size, 'sm' | 'md' | 'lg' | 'full'>;
}

const hiddenImgStyle: CSSProperties = { opacity: 0, transition: 'none' };

export const Image = ({
  alt: altProp,
  aspectRatio = '3 / 2',
  fit = 'contain',
  ref,
  responsive = false,
  size = 'md',
  src: srcProp,
  srcSet,
  ...rest
}: ImageProps) => {
  rest satisfies Exact<ImageContainerProps, typeof rest>;

  const src = (srcProp ?? '').trim();

  const translations = useTranslations(dictionary);
  const alt = altProp === '' ? null : altProp;
  const aspectRatioValue = typeof aspectRatio === 'number' ? `${aspectRatio}` : aspectRatio;

  return (
    <CoreImage
      {...pick(rest, 'data-testid', 'aria-hidden')}
      src={src || undefined}
      srcSet={srcSet}
      alt={alt}
      className={classNames('v2image', {
        'v2image--responsive': responsive,
        'v2image--sm': !responsive && size === 'sm',
        'v2image--md': !responsive && size === 'md',
        'v2image--lg': !responsive && size === 'lg',
        'v2image--full': !responsive && size === 'full',
      })}
      style={responsive ? undefined : ({ '--image-aspect-ratio': aspectRatioValue } as CSSProperties)}
    >
      <CoreImage.Img
        {...omit(rest, 'data-testid')}
        ref={ref}
        className={classNames('v2image__img', {
          'v2image__img--contain': fit === 'contain',
          'v2image__img--cover': fit === 'cover',
        })}
        style={state => (state.loadingState === 'success' ? {} : hiddenImgStyle)}
      />
      <CoreImage.Fallback unwrapped>
        {({ state, props }) =>
          ({
            error: (
              <span {...props} className='v2image__fallback'>
                <Icon icon='shp-square-x' variant='secondary' />
                <Text appearance='sm' variant='secondary' align='center'>
                  {alt === null ? translations.loadingError : alt}
                </Text>
              </span>
            ),
            initial: (
              <span {...props} className='v2image__fallback'>
                <Icon icon='shp-gallery' variant='secondary' />
              </span>
            ),
            success: <span {...props} className='v2image__fallback' />,
            pending: <span {...props} className='v2image__fallback' />,
          })[state.loadingState]
        }
      </CoreImage.Fallback>
    </CoreImage>
  );
};