import React, { useContext } from 'react';
import Icon from '../../../shared/components/icon';
import { BookingPackageItem } from '@qite/tide-client';
import { format } from 'date-fns';
import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
import { SearchResultsRootState } from '../../store/search-results-store';
import { useDispatch, useSelector } from 'react-redux';
import { setSelectedSearchResult } from '../../store/search-results-slice';
import he from 'he';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';

interface GroupTourCardProps {
  result: BookingPackageItem;
  languageCode?: string;
  cmsItem?: any;
}

const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
  const context = useContext(SearchResultsConfigurationContext);
  const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
  if (!context) {
    return null;
  }
  const dispatch = useDispatch();
  const translations = getTranslations(languageCode ?? 'en-GB');

  const genders = result.allotment?.travellerGenders || [];
  const maleCount = genders.filter((g) => g === 0).length;
  const femaleCount = genders.filter((g) => g === 1).length;
  const otherCount = genders.filter((g) => g === 2).length;

  const handleChange = (result: BookingPackageItem) => {
    dispatch(setSelectedSearchResult(result));
  };

  return (
    <div className="search__result-card">
      <div className="search__result-card__allotment">
        <div className="search__result-card__allotment__img-wrapper">
          <img src={cmsItem?.content?.images?.header?.url} alt={result.name} className="search__result-card__allotment__img" />
        </div>
        <div className="search__result-card__allotment__title__wrapper">
          <h3 className="search__result-card__allotment__title">{result.name}</h3>
          {cmsItem?.content?.introductie?.intro && (
            <div
              className="search__result-card__allotment__description"
              dangerouslySetInnerHTML={{ __html: he.decode(cmsItem.content.introductie.intro) }}></div>
          )}
          <div className="search__result-card__allotment__container">
            <div className="search__result-card__allotment__header">
              <div className="search__result-card__allotment__wrapper">
                <div className="search__result-card__allotment__date">
                  <Icon name="ui-plane" height={16} />
                  <div className="search__result-card__allotment__date--from">{format(new Date(result.fromDate), 'dd/MM/yyyy')}</div>
                </div>
                <div className="search__result-card__allotment__info">
                  <span>
                    <Icon name="ui-calendar" height={16} />
                  </span>{' '}
                  {calculateDays(result.stayFromDate, result.stayToDate)} {translations.PRODUCT.DAYS} -{' '}
                  <span>
                    <Icon name="ui-moon" height={16} />
                  </span>
                  {calculateNights(result.stayFromDate, result.stayToDate)} {translations.SRP.NIGHTS}
                </div>
              </div>
            </div>
            {result.allotment && (
              <div className="search__result-card__allotment__info">
                <span className="search__result-card__allotment__info__group">{translations?.SRP.TRAVEL_GROUP}</span>
                <div className="search__result-card__allotment__persons">
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-men" width={16} height={16} />
                    <span>{maleCount} p.</span>
                  </div>
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-women" width={16} height={16} />
                    <span>{femaleCount} p.</span>
                  </div>
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-other" width={16} height={16} />
                    <span>{otherCount} p.</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
        <div className="search__result-card__allotment__footer">
          <div className="search__result-card__allotment__price__wrapper">
            <div className="search__result-card__allotment__price">
              {formatPrice(result.price, result.currencyCode, languageCode)} {translations.PRODUCT.PER_PERSON}
            </div>
            {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
          </div>
          <button type="button" className={`cta ${selectedSearchResult === result ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result)}>
            {selectedSearchResult === result ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
          </button>
        </div>
      </div>
    </div>
  );
};

export default GroupTourCard;