import clsx from 'clsx';
import React from 'react';
import { Link } from 'react-router-dom';
import { useValueOrOnDemand } from '../../../hooks/useValueOrOnDemand/useValueOrOnDemand';
import { Loader } from '../../Loaders/Loader/Loader';
import { ImgElement } from '../../VisualElements';
import { LandingPageItem } from '../LandingPageTiles.model';
import classes from './TileLarge.scss';

// TODO: Support for background colors and hover effect

export interface TileLargeProps extends LandingPageItem {
  /** Column span */
  largeTileColumnSpan?: number;
  /** Row span */
  largeTileRowSpan?: number;
}

/**
 * Renders a large tile used in LandingPageTiles component
 * @example
 * <TileLarge
 *  path={'/movies'}
 *  label={'Movies'}
 *  icon={'/images/default_image.svg'}
 *  type={'large'}
 *  subtitle={256}
 *  largeTileColumnSpan={4}
 *  largeTileRowSpan={2}
 * />
 */
export const TileLarge: React.FC<TileLargeProps> = ({
  path,
  label,
  icon,
  disabled,
  subtitle,
  largeTileColumnSpan,
  largeTileRowSpan,
}) => {
  const customStyles = {
    gridColumn: largeTileColumnSpan ? `span ${largeTileColumnSpan}` : undefined,
    gridRow: largeTileRowSpan ? `span ${largeTileRowSpan}` : undefined,
  } as React.CSSProperties;

  const [subtitleValue, isSubtitleLoading] = useValueOrOnDemand(subtitle);

  return (
    <Link
      className={clsx(classes.container, disabled && classes.disabled)}
      to={{
        pathname: disabled ? undefined : path,
      }}
      style={customStyles}
    >
      <div className={classes.icon} data-test-id="tile-icon-large">
        {React.isValidElement(icon)
          ? icon
          : typeof icon === 'string' && (
              <ImgElement src={icon} decorative={true} />
            )}
      </div>
      <div className={classes.titlesSection}>
        <span className={classes.label} data-test-id="tile-label">
          {label}
        </span>
        <span className={classes.subtitle}>
          <Loader showLoader={isSubtitleLoading}>{subtitleValue}</Loader>
        </span>
      </div>
    </Link>
  );
};
