import {PlaceCategory} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {bookingActionLabel, bookingLinks, stayBookingView} from '@site/lib/derive';
import {BOOK_EVENT} from '../paper/Rooms';
import {Fire} from './Art';

export function Booking() {
  const payload = useSite();
  const links = bookingLinks(payload);
  const stay = payload.place.category === PlaceCategory.LODGING ? stayBookingView(payload) : null;
  const phone = payload.place.phone;
  const book = () => window.dispatchEvent(new Event(BOOK_EVENT));

  const box = (full: boolean) => (
    <div className="book">
      <Fire side="left" />
      <Fire side="right" delay=".2s" />
      <h2 id={full ? 'booking-heading' : 'booking-home-heading'} className="disp">
        이용안내 및 예약
      </h2>
      <p>요금과 예약 방법을 안내합니다.</p>
      <div className="btns">
        {stay && (
          <button type="button" className="btn disp" onClick={book}>
            예약하기
          </button>
        )}
        {(full ? links : links.slice(0, 1)).map((link) => (
          <a key={link.url} className="btn btn--line" href={link.url} target="_blank" rel="noopener noreferrer">
            {bookingActionLabel(link)}
          </a>
        ))}
        {full && phone && (
          <a className="btn btn--line" href={`tel:${phone}`}>
            {phone}
          </a>
        )}
        {!full && (
          <a className="btn btn--line" href="#/stay">
            이용안내 보기
          </a>
        )}
      </div>
    </div>
  );

  return (
    <>
      <div data-pg="home">
        <section className="sec sec--box" aria-labelledby="booking-home-heading">
          {box(false)}
        </section>
      </div>
      <div data-pg="stay">
        <section className="sec sec--box" id="booking" aria-labelledby="booking-heading">
          {box(true)}
        </section>
      </div>
    </>
  );
}