import {PlaceCategory} from '@o2o/shared';
import {HeroCatchphrase, HeroRotator} from '@site/sections/HeroCatchphrase';
import {useSite} from '@site/lib/site-context';
import {galleryImages, isSectionEnabled} from '@site/lib/derive';
import {useLiveWeather} from '@site/lib/use-live-weather';
import {Car} from '../paper/Car';
import {MoodIcon, 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 where = place.addressLocality ?? place.addressRegion;
  const sub = [where, fixed].filter(Boolean).join(' · ');
  const showWeather = isSectionEnabled(payload, 'weather');
  const weather = useLiveWeather({
    initial: payload.local.weather,
    regionCode: payload.place.regionCode,
    latitude: payload.place.latitude,
    longitude: payload.place.longitude,
  });
  const backdrop = galleryImages(payload).find((image) => !image.isPrimary);

  return (
    <>
      <section className="hero" id="top" data-pg="home">
        {slides.length > 0 && (
          <Car
            label={`${place.name} 사진`}
            autoplay={6000}
            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="veil" />
        <div className="hero-copy">
          {lodging ? (
            <>
              <p className="big">
                <HeroCatchphrase />
              </p>
              <h1 className="nm">{place.name}</h1>
              {where && <p className="sub">{where}</p>}
              <HeroRotator className="sub" />
            </>
          ) : (
            <>
              <h1 className="big">{place.name}</h1>
              {sub && <p className="sub">{sub}</p>}
            </>
          )}
        </div>
        <div className="hero-meta">
          {showWeather && weather ? (
            <a className="wx-chip glass" href="#weather">
              <MoodIcon condition={weather.condition} />
              {Math.round(weather.temperature)}° {weather.condition}
            </a>
          ) : (
            <span />
          )}
          <span className="scroll" aria-hidden>
            SCROLL
          </span>
        </div>
      </section>
      {showWeather && weather && (
        <div data-editor-id="weather" style={{display: 'contents'}}>
          <Weather weather={weather} backdrop={backdrop} />
        </div>
      )}
    </>
  );
}