import React, { ReactNode } from 'react';
import { SearchResult, SearchResultsConfiguration } from '../../types';
import SearchResults from '../..';
import { Navbar, Footer } from '../../../../src';
import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
import Icon from '../../../shared/components/icon';

interface HotelFlightSearchResultsSelfContainedProps {}

const HotelFlightSearchResultsSelfContained: React.FC<HotelFlightSearchResultsSelfContainedProps> = () => {
  const customCardRenderer = (result: SearchResult): ReactNode => {
    switch (result.type) {
      case 'hotel':
        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">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">
                    <div className="rating">
                      <Icon name="ui-star" key={`rating-star-1`} width={14} height={14} />
                      <Icon name="ui-star" key={`rating-star-2`} width={14} height={14} />
                      <Icon name="ui-star" key={`rating-star-3`} width={14} height={14} />
                      <Icon name="ui-star" key={`rating-star-4`} width={14} height={14} />
                      <Icon name="ui-star" key={`rating-star-5`} width={14} height={14} />
                    </div>
                    <h3 className="search__result-card__title">
                      {/* {result.title} */}
                      hallo world!
                    </h3>
                  </div>
                </div>
                <a className="search__result-card__location">
                  <Icon name="ui-location" height={16} />
                  Amsterdam -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>
                  <div className="search__result-card__option">
                    <Icon name="ui-bed" height={16} />
                    Comfort Room
                  </div>
                </div>
                {/* {result.description && (
                  <p
                    style={{
                      fontSize: '0.95rem',
                      color: '#666',
                      marginBottom: '12px'
                    }}>
                    {result.description}
                  </p>
                )} */}
                <p className="search__result-card__description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <div className="search__result-card__footer">
                <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
                  {result.ctaText}
                </button>
              </div>
            </div>
          </div>
        );
      case 'flight':
        return <p>This should not be here...</p>;
      default:
        return null;
    }
  };

  const configuration: SearchResultsConfiguration = {
    searchConfiguration: {
      id: 7,
      name: 'Transport + hotel',
      icon: '',
      defaultSearchType: 0,
      serviceTypes: [0],
      defaultCatalogueId: 1,
      defaultDuration: undefined,
      fromDateAmount: 1,
      fromDateAmountType: 1,
      toDateAmount: 7,
      toDateAmountType: 0,
      enableManualPackaging: true,
      allowFlights: true,
      allowAccommodations: true,
      allowCarRentals: false,
      allowTransfers: false,
      allowExcursions: false,
      qsmType: 2
    },
    showFilters: false,
    tideConnection: {
      host: 'https://tide-default3468-acceptance.tidesoftware.be',
      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
      catalogueIds: [1, 2]
    },
    showTabViews: true,
    showFlightResults: true,
    showHotelAccommodationResults: true,
    showCustomCards: true,
    customCardRenderer,
    destinationImage: {
      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
      alt: 'Tenerife'
    }
  };

  return (
    <div id="tide-content">
      <Navbar
        logo={<TideLogo />}
        topLinks={topLinks}
        items={navItems}
        language={language}
        languages={languages}
        onLanguageChange={(lang) => console.log('Language changed:', lang)}
        onSearch={(query) => console.log('Search:', query)}
      />
      <SearchResults configuration={configuration} />
      <Footer />
    </div>
  );
};

export default HotelFlightSearchResultsSelfContained;