import { useRouter } from "next/navigation"
import { useIntl } from "react-intl"

import { CheckCircleIcon, EditIcon } from "@/components/Icons"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import RemoveButton from "./RemoveButton"

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

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

export function AddedAncillaries({
  ancillaries,
  booking,
}: AddedAncillariesProps) {
  const intl = useIntl()
  const router = useRouter()

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Subtitle>{intl.formatMessage({ id: "My Add-on's" })}</Subtitle>

        {booking.ancillary?.deliveryTime && (
          <div className={styles.deliveryTime}>
            <Body color="baseTextHighContrast" textTransform="bold">
              {intl.formatMessage({ id: "Delivered at:" })}
            </Body>
            <Body color="baseTextHighContrast" textTransform="bold">
              {booking.ancillary?.deliveryTime}
            </Body>
          </div>
        )}
      </div>

      {booking.ancillaries.map((ancillary) => {
        const ancillaryItem = ancillaries?.find((a) => a.id === ancillary.code)

        return (
          <>
            <Accordion className={styles.ancillaryMobile}>
              <AccordionItem
                title={ancillaryItem?.title ?? ""}
                icon={<CheckCircleIcon color="uiSemanticSuccess" />}
              >
                <div>
                  {ancillary.comment && (
                    <>
                      <div className={styles.commentMobile}>
                        <Body textTransform="bold">
                          {intl.formatMessage({ id: "Other requests" })}:
                        </Body>
                        <Body color="uiTextMediumContrast">
                          {ancillary.comment}
                        </Body>
                      </div>
                    </>
                  )}
                  <div className={styles.paymentMobileWrapper}>
                    <div className={styles.paymentMobile}>
                      <Body>{intl.formatMessage({ id: "Total" })}</Body>
                      <Body textTransform="bold">
                        {ancillary.currency.toLowerCase() === "points"
                          ? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}`
                          : `${ancillary.totalPrice} ${ancillary.currency}`}
                      </Body>
                    </div>
                  </div>
                </div>

                <div className={styles.footerMobile}>
                  {booking.confirmationNumber && ancillary.code ? (
                    <div className={styles.actions}>
                      <Button
                        intent="text"
                        size="small"
                        variant="icon"
                        theme="base"
                      >
                        <EditIcon />
                        {intl.formatMessage({ id: "Modify" })}
                      </Button>
                      <Divider
                        variant="vertical"
                        color="baseSurfaceSubtleNormal"
                      />
                      <RemoveButton
                        confirmationNumber={booking.confirmationNumber}
                        code={ancillary.code}
                        title={ancillaryItem?.title}
                        onSuccess={() => router.refresh()}
                      />
                    </div>
                  ) : null}
                </div>
              </AccordionItem>
            </Accordion>
            <div className={styles.ancillaryDesktop}>
              <div className={styles.specification}>
                <div className={styles.name}>
                  <CheckCircleIcon color="uiSemanticSuccess" />
                  <Body textTransform="bold">{ancillaryItem?.title}</Body>
                  <Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
                </div>
                <div className={styles.payment}>
                  <Body>{intl.formatMessage({ id: "Total" })}</Body>
                  <Body textTransform="bold">
                    {ancillary.currency.toLowerCase() === "points"
                      ? `${ancillary.totalPrice} ${intl.formatMessage({ id: "Points" })}`
                      : `${ancillary.totalPrice} ${ancillary.currency}`}
                  </Body>
                </div>
              </div>

              <Divider color="baseSurfaceSubtleHover" />

              <div className={styles.footer}>
                <div className={styles.comment}>
                  {ancillary.comment && (
                    <>
                      <Body textTransform="bold">
                        {intl.formatMessage({ id: "Other requests" })}:
                      </Body>
                      <Body>{ancillary.comment}</Body>
                    </>
                  )}
                </div>
                {booking.confirmationNumber && ancillary.code ? (
                  <div className={styles.actions}>
                    <Button
                      intent="text"
                      size="small"
                      variant="icon"
                      theme="base"
                    >
                      <EditIcon />
                      {intl.formatMessage({ id: "Modify" })}
                    </Button>
                    <Divider
                      variant="vertical"
                      color="baseSurfaceSubtleNormal"
                    />
                    <RemoveButton
                      confirmationNumber={booking.confirmationNumber}
                      code={ancillary.code}
                      title={ancillaryItem?.title}
                      onSuccess={() => router.refresh()}
                    />
                  </div>
                ) : null}
              </div>
            </div>
          </>
        )
      })}
    </div>
  )
}
