import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
import { trackViewAncillary } from "@/utils/tracking/myStay"

import type { SelectedAncillary } from "@/types/components/myPages/myStay/ancillaries"

interface WrappedAncillaryProps {
  ancillary: SelectedAncillary
  onClose?: () => void
}

export default function WrappedAncillaryCard({
  onClose,
  ancillary,
}: WrappedAncillaryProps) {
  const { description, ...ancillaryWithoutDescription } = ancillary
  const { selectAncillary, booking } = useAddAncillaryStore((state) => ({
    selectAncillary: state.selectAncillary,
    booking: state.booking,
  }))

  function clickAncillary() {
    if (typeof onClose === "function") {
      onClose()
    }
    selectAncillary(ancillary)
    trackViewAncillary(ancillary, booking)
  }

  return (
    <div
      tabIndex={0}
      role="button"
      onClick={clickAncillary}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          clickAncillary()
        }
      }}
    >
      <AncillaryCard ancillary={ancillaryWithoutDescription} />
    </div>
  )
}