import React, {
  useCallback,
  useMemo,
} from 'react';

import classNames from 'classnames';

import { Marquee } from '@enact/sandstone/Marquee';
import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';

import defaultLogoImg
  from '../../../../assets/images/ic-tab-partners-default@3x.png';
import { $L } from '../../../utils/helperMethods';
import css from './THeaderCustom.module.less';

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);
const SpottableComponent = Spottable("button");

export default function THeaderCustom({
  prdtId,
  title,
  type,
  themeTitle,
  selectedIndex,
  className,
  onBackButton,
  onSpotlightUp,
  onSpotlightLeft,
  onBackButtonFocus,
  marqueeDisabled = true,
  onClick,
  ariaLabel,
  children,
  kind,
  logoImg,
  patnrId,
  themeData,
  ...rest
}) {
  const convertedTitle = useMemo(() => {
    if (title && typeof title === "string") {
      const cleanedTitle = title.replace(/(\r\n|\n)/g, "");
      return $L(marqueeDisabled ? title : cleanedTitle);
    } else if(type === "theme") {
      return themeData?.productInfos[selectedIndex].prdtNm;
    }
    return "";
  }, [marqueeDisabled, title, selectedIndex, themeData, type]);

  const _onClick = useCallback(
    (e) => {
      if (onClick) {
        onClick(e);
      }
    },
    [onClick]
  );

  const _onSpotlightUp = (e) => {
    if (onSpotlightUp) {
      onSpotlightUp(e);
    }
  };

  const _onSpotlightLeft = (e) => {
    if (onSpotlightLeft) {
      onSpotlightLeft(e);
    }
  };

  const _onBackButtonFocus = useCallback(() => {
    if(onBackButtonFocus){
      onBackButtonFocus();
    }
  },[onBackButtonFocus]) 
  
  return (
    <Container className={classNames(css.tHeaderCustom, className)} {...rest}>
      {onBackButton && (
        <SpottableComponent
          className={css.button}
          onClick={_onClick}
          onFocus={_onBackButtonFocus}
          spotlightId={"spotlightId_backBtn"}
          onSpotlightUp={_onSpotlightUp}
          onSpotlightLeft={_onSpotlightLeft}
          aria-label="Back"
          role="button"
        />
      )}
      {kind ? (
        ""
      ) : (
        <div
          className={css.centerImage}
          style={{
            backgroundImage: `url("${logoImg}")`,
            backgroundSize: patnrId === "1" ? "43px 43px" : "contain",
          }}
        />
      )}
      {type === "theme" && themeTitle && (
        <span className={css.themeTitle} dangerouslySetInnerHTML={{ __html: `[${themeTitle}]` }} />        
      )}
      <Marquee
        marqueeOn="render"
        className={css.title}
        marqueeDisabled={marqueeDisabled}
        aria-label={ariaLabel}
      >
        {(prdtId && patnrId !== "21") && <span className={css.prdtId}>ID : {prdtId}</span>}
        {convertedTitle && (
          <span dangerouslySetInnerHTML={{ __html: convertedTitle }} />
        )}
      </Marquee>
      {children}
    </Container>
  );
}