import {PlaceCategory} from '@o2o/shared';
import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
import {useSite} from '@site/lib/site-context';
import {bookingActionLabel, bookingLinks, heroFacts, isSectionEnabled, stayBookingView} from '@site/lib/derive';
import {Car} from '../paper/Car';
import {BOOK_EVENT} from '../paper/Rooms';
import {Weather} from './Weather';

const MAX_SLIDES = 5;

export function Hero() {
  const payload = useSite();
  const {place, narrative} = payload;
  const slides = [...payload.media]
    .filter((image) => image.alt?.trim())
    .sort((a, b) => Number(b.isPrimary) - Number(a.isPrimary))
    .slice(0, MAX_SLIDES);
  const fixed = narrative.tagline ?? narrative.heroSubline;
  const lodging = place.category === PlaceCategory.LODGING;
  const region = place.addressLocality ?? place.addressRegion;
  const booking = bookingLinks(payload)[0];
  const stay = lodging ? stayBookingView(payload) : null;
  const chips = heroFacts(payload).map((row) => `${row.label} ${row.value}`);

  return (
    <>
      <div className="hero" id="top" data-pg="home">
        <div className="hero-card">
          {slides.length > 0 && (
            <Car
              label={`${place.name} 사진`}
              autoplay={5000}
              dots
              style={{height: '100%'}}
              slides={slides.map((image, i) => (
                <img
                  key={image.mediaId}
                  src={image.url}
                  alt={image.alt}
                  fetchPriority={i === 0 ? 'high' : 'low'}
                  loading={i === 0 ? undefined : 'lazy'}
                  decoding="async"
                />
              ))}
            />
          )}
          <div className="hero-copy">
            <h1 className="eyebrow">
              {place.name}
              {region && ` · ${region}`}
            </h1>
            {lodging ? (
              <p className="hl">
                <HeroCatchphrase />
              </p>
            ) : (
              fixed && <p className="hl in">{fixed}</p>
            )}
            {lodging && fixed && <p className="tagline">{fixed}</p>}
            {chips.length > 0 && (
              <div className="chips">
                {chips.map((chip) => (
                  <span key={chip} className="chip">
                    {chip}
                  </span>
                ))}
              </div>
            )}
            <div className="hero-cta">
              {stay ? (
                <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
                  예약하기
                </button>
              ) : (
                booking && (
                  <a className="btn" href={booking.url} target="_blank" rel="noopener noreferrer">
                    {bookingActionLabel(booking)}
                  </a>
                )
              )}
              <a className="btn soft" href="#/stay">
                이용안내 보기
              </a>
            </div>
          </div>
        </div>
      </div>
      {isSectionEnabled(payload, 'weather') && (
        <div data-editor-id="weather" style={{display: 'contents'}}>
          <Weather />
        </div>
      )}
    </>
  );
}