import React from 'react';
import { HotelResult } from '../../types';
import Icon from '../../../shared/components/icon';
import { useDispatch, useSelector } from 'react-redux';
import { SearchResultsRootState } from '../../store/search-results-store';
import { setSelectedPackagingAccoResult } from '../../store/search-results-slice';
import he from 'he';

interface HotelCardProps {
  result: HotelResult;
  translations?: any;
}

const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
  const dispatch = useDispatch();
  const { selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);

  const handleChange = (productCode: string) => {
    dispatch(setSelectedPackagingAccoResult(productCode));
  };

  if (result.contents?.length) {
    return (
      <div
        key={result.id}
        className="search__result-card__wrapper search__result-card__wrapper--custom"
        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
        <div className="search__result-card__top" dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
        <div className="search__result-card__footer">
          <button
            type="button"
            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
            onClick={() => handleChange(result.code)}>
            {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div
      key={result.id}
      className="search__result-card__wrapper"
      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
      <div className="search__result-card__img-wrapper">
        <img src={result.image} alt={result.title} className="search__result-card__img" />
        <div className="search__result-card__price__wrapper">
          <span className="search__result-card__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
          <span className="search__result-card__price">{result.price}</span>
        </div>
      </div>
      <div className="search__result-card__content">
        <div className="search__result-card__content__wrapper">
          <div className="search__result-card__header">
            <div className="search__result-card__header__wrapper">
              {result.stars && (
                <div className="rating">
                  {[...Array(result.stars)].map((_, index) => (
                    <Icon name="ui-star" key={`rating-star-${index + 1}`} width={14} height={14} />
                  ))}
                </div>
              )}
              <h3 className="search__result-card__title">{result.title}</h3>
            </div>
          </div>
          <a className="search__result-card__location">
            <Icon name="ui-location" height={16} />
            {result.location}
            {/*  - Show on map &gt; 1.1 km from Center */}
          </a>
          <div className="search__result-card__options">
            {/* <div className="search__result-card__option">
              <Icon name="ui-wifi" height={16} />
              Free Wi-Fi
            </div> */}
            {result.accommodation && (
              <div className="search__result-card__option">
                <Icon name="ui-bed" height={16} />
                {result.accommodation}
              </div>
            )}
            {result.regime && (
              <div className="search__result-card__option">
                <Icon name="ui-utensils" height={16} />
                {result.regime}
              </div>
            )}
          </div>
          <p className="search__result-card__description">{result.description}</p>
        </div>
        <div className="search__result-card__footer">
          <button
            type="button"
            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
            onClick={() => handleChange(result.code)}>
            {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
          </button>
          {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
            {translations?.SRP.VIEW_DETAILS}
          </button> */}
        </div>
      </div>
    </div>
  );
};

export default HotelCard;