"use client"

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

import { useEnterDetailsStore } from "@/stores/enter-details"

import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import styles from "./bottomSheet.module.css"

export function SummaryBottomSheet({ children }: PropsWithChildren) {
  const intl = useIntl()

  const { isSummaryOpen, toggleSummaryOpen, totalPrice } = useEnterDetailsStore(
    (state) => ({
      isSummaryOpen: state.isSummaryOpen,
      toggleSummaryOpen: state.toggleSummaryOpen,
      totalPrice: state.totalPrice,
    })
  )

  return (
    <div className={styles.wrapper} data-open={isSummaryOpen}>
      <div className={styles.content}>{children}</div>
      <div className={styles.bottomSheet}>
        <button
          data-open={isSummaryOpen}
          onClick={toggleSummaryOpen}
          className={styles.priceDetailsButton}
        >
          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
          <Subtitle>
            {intl.formatMessage(
              { id: "{amount} {currency}" },
              {
                amount: intl.formatNumber(totalPrice.local.price),
                currency: totalPrice.local.currency,
              }
            )}
          </Subtitle>
          <Caption color="baseTextHighContrast" type="underline">
            {intl.formatMessage({ id: "See details" })}
          </Caption>
        </button>
        <Button intent="primary" size="large" type="submit">
          {intl.formatMessage({ id: "Complete booking" })}
        </Button>
      </div>
    </div>
  )
}