import { useIntl } from "react-intl"

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

import { CancellationRuleEnum } from "@/constants/booking"
import { useMyStayStore } from "@/stores/my-stay"

import Modal from "@/components/Modal"
import useRateTitles from "@/hooks/booking/useRateTitles"

import Row from "../Row"

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

import { RateEnum } from "@/types/enums/rate"

export default function Terms() {
  const intl = useIntl()
  const rateTitles = useRateTitles()

  const { generalTerms, cancellationRule } = useMyStayStore((state) => ({
    generalTerms: state.bookedRoom.rateDefinition.generalTerms,
    cancellationRule: state.bookedRoom.rateDefinition.cancellationRule,
  }))

  let rateTerm: { paymentTerm: string; title: string }
  switch (cancellationRule) {
    case CancellationRuleEnum.CancellableBefore6PM:
      rateTerm = rateTitles[RateEnum.flex]
      break
    case CancellationRuleEnum.Changeable:
      rateTerm = rateTitles[RateEnum.change]
      break
    default:
      rateTerm = rateTitles[RateEnum.save]
  }

  return (
    <>
      <Row
        icon="contract"
        text={rateTerm.title}
        title={intl.formatMessage({
          defaultMessage: "Terms",
        })}
      >
        <Modal
          title={rateTerm.title}
          subtitle={rateTerm.paymentTerm}
          trigger={
            <IconButton theme="Black" style="Muted" className={styles.button}>
              <MaterialIcon icon="info" color="Icon/Default" size={20} />
            </IconButton>
          }
        >
          <div className={styles.terms}>
            {generalTerms.map((term) => (
              <Typography key={term} variant="Body/Paragraph/mdRegular">
                <p className={styles.term}>
                  <MaterialIcon
                    icon="check"
                    color="Icon/Feedback/Success"
                    size={20}
                  />
                  {term}
                </p>
              </Typography>
            ))}
          </div>
        </Modal>
      </Row>
    </>
  )
}
