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

interface RoundTripResultsProps {}

const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
  const dispatch = useDispatch();

  useEffect(() => {
    if (activeTab === 'compact') {
      dispatch(setActiveTab('list'));
    }
  }, [activeTab]);

  return (
    <div className={`search__results__cards search__results__cards--${activeTab}`}>
      <div className="search__result-card">
        <div className="search__result-card__allotment">
          <div className="search__result-card__allotment__img-wrapper">
            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
          </div>
          <div className="search__result-card__allotment__title__wrapper">
            <h3 className="search__result-card__allotment__title">
              Rondreis Noord-India: Rajasthan
              <span className="search__result-card__allotment__badge">
                <Icon name="ui-circle-check" width={14} height={14} />
                GAR
              </span>
            </h3>

            <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">05-04-2026</div>
                  </div>
                  <div className="search__result-card__allotment__info">
                    <span>
                      <Icon name="ui-calendar" height={16} />
                    </span>{' '}
                    8 dagen -{' '}
                    <span>
                      <Icon name="ui-moon" height={16} />
                    </span>
                    7 nachten
                  </div>
                </div>
              </div>
              <div className="search__result-card__allotment__info">
                <a href="#" type="button" className="search__result-card__allotment__info__group">
                  Group
                </a>
                <div className="search__result-card__allotment__persons">
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-men" width={16} height={16} />
                    <span>2 p.</span>
                  </div>
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-women" width={16} height={16} />
                    <span>3 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">€ 1.250,00 p.p.</div>
              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
            </div>
            <button className="cta cta--select">Bekijk reis</button>
          </div>
        </div>
      </div>
      <div className="search__result-card">
        <div className="search__result-card__allotment">
          <div className="search__result-card__allotment__img-wrapper">
            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
          </div>
          <div className="search__result-card__allotment__title__wrapper">
            <h3 className="search__result-card__allotment__title">
              Rondreis Thailand
              <span className="search__result-card__allotment__badge search__result-card__allotment__badge--secondary">
                <Icon name="ui-circle-half" width={14} height={14} />
                BIJNA GAR
              </span>
            </h3>
            <p className="search__result-card__allotment__description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
            </p>
            <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">05-04-2026</div>
                  </div>
                  <div className="search__result-card__allotment__info">
                    <span>
                      <Icon name="ui-calendar" height={16} />
                    </span>{' '}
                    8 dagen -{' '}
                    <span>
                      <Icon name="ui-moon" height={16} />
                    </span>
                    7 nachten
                  </div>
                </div>
              </div>
              <div className="search__result-card__allotment__info">
                <a href="#" type="button" className="search__result-card__allotment__info__group">
                  Group
                </a>
                <div className="search__result-card__allotment__persons">
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-men" width={16} height={16} />
                    <span>2 p.</span>
                  </div>
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-women" width={16} height={16} />
                    <span>3 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">€ 1.250,00 p.p.</div>
              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
            </div>
            <button className="cta cta--select">Bekijk reis</button>
          </div>
        </div>
      </div>
      <div className="search__result-card">
        <div className="search__result-card__allotment">
          <div className="search__result-card__allotment__img-wrapper">
            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
          </div>
          <div className="search__result-card__allotment__title__wrapper">
            <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>

            <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">05-04-2026</div>
                  </div>
                  <div className="search__result-card__allotment__info">
                    <span>
                      <Icon name="ui-calendar" height={16} />
                    </span>{' '}
                    8 dagen -{' '}
                    <span>
                      <Icon name="ui-moon" height={16} />
                    </span>
                    7 nachten
                  </div>
                </div>
              </div>
              <div className="search__result-card__allotment__info">
                <a href="#" type="button" className="search__result-card__allotment__info__group">
                  Group
                </a>
                <div className="search__result-card__allotment__persons">
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-men" width={16} height={16} />
                    <span>2 p.</span>
                  </div>
                  <div className="search__result-card__allotment__person">
                    <Icon name="ui-women" width={16} height={16} />
                    <span>3 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">€ 1.250,00 p.p.</div>
              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
            </div>
            <button className="cta cta--select">Bekijk reis</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RoundTripResults;