import { capitalizeFirstLetter } from '@/src/utils/commonFunctions';
import { renderSafeHtml } from '@/src/utils/sanitizeHTML';
import styles from './CancellationCards.module.scss';

const CancellationCards = ({ data, totalNights }: { data: any, totalNights: number }) => {

/**
 * Returns an index that determines the highlight style of a cancellation card.
 * The index is based on the number of total nights.
 * If the number of total nights is undefined, null is returned.
 * If the number of total nights is less than 29, 0 is returned.
 * If the number of total nights is less than 60, 1 is returned.
 * If the number of total nights is less than 180, 2 is returned.
 * Otherwise, null is returned.
 */
  const getHighlightIndex = (totalNights?: number): number | null => {
    if (totalNights === undefined) return null;
    if (totalNights < 29) return 0;
    if (totalNights < 60) return 1;
    if (totalNights < 180) return 2;
    return null;
  };

/**
 * Returns a CSS class name for the title of a cancellation card based on whether the card is highlighted or not.
 * If the card is highlighted (i.e. its index matches the highlightIndex), returns 'bg-bgColor', otherwise returns 'bg-whiteFBColor'.
 * @param {number | null} highlightIndex - The index of the highlighted card, or null if there is no highlighted card.
 * @param {number} index - The index of the card.
 * @returns {string} The CSS class name for the title of the cancellation card.
 */
  const cardClass = (highlightIndex: number | null, index: number) => {
    return index === highlightIndex ? 'bg-bgColor' : 'bg-whiteFBColor';
  };

/**
 * Returns a CSS class name for the title of a cancellation card based on whether the card is highlighted or not.
 * If the card is highlighted (i.e. its index matches the highlightIndex), returns 'text-secondaryColor', otherwise returns 'text-blackColor'.
 * @param {number | null} highlightIndex - The index of the highlighted card, or null if no card is highlighted.
 * @param {number} index - The index of the card.
 * @returns {string} - The CSS class name for the title of the card.
 */
  const cardTitleClass = (highlightIndex: number | null, index: number) => {
    return index === highlightIndex ? 'text-secondaryColor' : 'text-blackColor';
  };

  return (
    <>
      {data && data?.map((Item: any, ItemKey: any) => {
        const highlightIndex = getHighlightIndex(totalNights);
        return (
          <div key={ItemKey} className={`${cardClass(highlightIndex, ItemKey)} rounded-[30px]`}>
            <div className={`${styles.CardHeader} bg-white rotate-180 m-auto -mt-px py-2.5 px-5`}>
              <div className="rotate-180 flex gap-1.5 items-center justify-center">
                <span className={`${cardTitleClass(highlightIndex, ItemKey)} text-blackColor fs-18 !font-fw600`}>{Item?.durationData?.title}</span>
              </div>
            </div>
            <div className="px-5 pt-4 pb-[30px]">
              <div className="text-grey667Color !text-center !text-size-fs14 sm:!text-size-fs16 notesForGuest policy-card-wrapper">
                {renderSafeHtml(Item?.description)}
              </div>
            </div>
          </div>
        )
      })}
    </>
  );
};

export default CancellationCards;