import React, { ReactNode } from 'react';
import { Filter, 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 HotelSearchResultsSelfContainedProps {}

const HotelSearchResultsSelfContained: React.FC<HotelSearchResultsSelfContainedProps> = () => {
  // Filters
  const filters: Filter[] = [
    {
      property: 'regime',
      label: 'Regime',
      type: 'checkbox',
      options: [
        { label: 'Room only', value: ['RO', 'LO', 'OB'], isChecked: false },
        { label: 'Bed & Beakfast', value: ['BB', 'KO'], isChecked: false },
        { label: 'Half board', value: ['HB'], isChecked: false },
        { label: 'Full board', value: ['FB'], isChecked: false }
      ],
      isFrontendFilter: false
    },
    {
      property: 'price',
      label: 'Prijs',
      type: 'slider',
      isFrontendFilter: false
    },
    {
      property: 'rating',
      label: 'Rating',
      type: 'star-rating',
      isFrontendFilter: true
    },
    {
      property: 'theme',
      label: "Thema's",
      type: 'toggle',
      options: [
        { label: 'Adults', value: 1, isChecked: false },
        { label: 'Luxury', value: 2, isChecked: false },
        { label: 'Welness & Spa', value: 3, isChecked: false },
        { label: 'familie', value: 4, isChecked: false }
      ],
      isFrontendFilter: false
    }
  ];

  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: 5,
      name: 'Search Hotels',
      icon: '',
      defaultSearchType: 0,
      serviceTypes: [3],
      defaultCatalogueId: 1,
      defaultDuration: undefined,
      fromDateAmount: 1,
      fromDateAmountType: 1,
      toDateAmount: 7,
      toDateAmountType: 0,
      enableManualPackaging: false,
      allowFlights: false,
      allowAccommodations: false,
      allowCarRentals: false,
      allowTransfers: false,
      allowExcursions: false,
      qsmType: 1
    },
    tideConnection: {
      host: 'https://tide-default3468-acceptance.tidesoftware.be',
      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
      catalogueIds: [1, 2]
    },
    showFilters: true,
    showFlightResults: false,
    showHotelAccommodationResults: true,
    showFlightAccommodationResults: false,
    showRoundTripResults: false,
    showTabViews: true,
    filterIcon: (
      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
        <path
          d="M7.429 16v-5.714h1.714v2H16V14h-6.857v2ZM0 14v-1.714h5.714V14Zm3.429-3.143v-2H0v-1.715h3.429v-2h1.714v5.715Zm3.428-2v-1.715H16v1.715Zm3.429-3.143V0H12v2h4v1.715h-4v2Zm-10.286-2V2h9.143v1.715Z"
          transform="translate(0 0)"
        />
      </svg>
    ),
    filters,
    useGlobalApplyFilterButton: true,
    onFilterChange: (updatedFilters) => {
      console.log('Filters changed:', updatedFilters);
    },

    // Results
    // results,
    showCustomCards: true,
    // customCards,
    customCardRenderer,

    // Map View
    showMapView: false,

    // Pagination
    // pagination: {
    //   totalResults: 50,
    //   currentPage: 1,
    //   onPaginationChange: (page: number) => {
    //     console.log("Pagination changed to page:", page);
    //   },
    // },

    // State & UI
    isLoading: false,
    customSpinner: null,

    languageCode: 'en-GB',
    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 HotelSearchResultsSelfContained;