"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import JsonToHtml from "@/components/JsonToHtml"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"

import type { DestinationCityPageData } from "@/types/trpc/routers/contentstack/destinationCityPage"
import type { DestinationCountryPageData } from "@/types/trpc/routers/contentstack/destinationCountryPage"

interface DestinationPageSidepeekProps {
  buttonText?: string | null
  sidePeekContent: NonNullable<
    | DestinationCityPageData["sidepeek_content"]
    | DestinationCountryPageData["sidepeek_content"]
  >
  location: string
}
export default function DestinationPageSidepeek({
  buttonText,
  sidePeekContent,
  location,
}: DestinationPageSidepeekProps) {
  const intl = useIntl()
  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
  const { heading, content } = sidePeekContent

  function handleButtonClick() {
    setSidePeekIsOpen(true)
    trackOpenSidePeekOnDestinationPagesEvent(location)
  }

  return (
    <div>
      <Button
        onPress={handleButtonClick}
        theme="base"
        variant="icon"
        intent="text"
        size="small"
        wrapping
      >
        {buttonText ||
          intl.formatMessage({
            defaultMessage: "Read more",
          })}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
      <SidePeek
        title={heading}
        isOpen={sidePeekIsOpen}
        openInRoot
        handleClose={() => setSidePeekIsOpen(false)}
      >
        <JsonToHtml
          nodes={content.json.children}
          embeds={content.embedded_itemsConnection.edges}
        />
      </SidePeek>
    </div>
  )
}
