import { Rate, RateTermDetails } from '../types'

import { cx } from 'class-variance-authority'
import { Button as ButtonRAC } from 'react-aria-components'
import { useIntl } from 'react-intl'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'

interface RegularRateCardProps {
  id: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
  rate?: Rate
  memberRate?: Rate
  omnibusRate?: Rate
  approximateRate?: Rate
  isMemberRateActive?: boolean
  handleChange: () => void
  roomTypeCode: string
  rateTermDetails: RateTermDetails[]
}

export default function RegularRateCard({
  id,
  isSelected,
  rateTitle,
  paymentTerm,
  approximateRate,
  omnibusRate,
  rate,
  roomTypeCode,
  memberRate,
  isMemberRateActive,
  handleChange,
  rateTermDetails,
}: RegularRateCardProps) {
  const classNames = variants({ variant: 'Regular' })

  const intl = useIntl()

  return (
    <div
      className={cx(classNames, {
        [styles.selected]: isSelected,
      })}
    >
      <ButtonRAC
        onPress={handleChange}
        className={styles.buttonOverlay}
        aria-pressed={isSelected}
        aria-describedby={`${roomTypeCode} ${id}-title`}
        aria-labelledby={`${id}-details`}
      />
      <div className={styles.container}>
        <Typography variant="Tag/sm">
          <h3 className={styles.title}>
            <Modal
              title={rateTitle}
              subtitle={paymentTerm}
              trigger={
                <IconButton
                  variant="Muted"
                  emphasis
                  size="sm"
                  className={styles.triggerButton}
                  aria-label={intl.formatMessage({
                    id: 'selectRate.rateCard.openReservationPolicy',
                    defaultMessage: 'Open reservation policy',
                  })}
                >
                  <MaterialIcon icon="info" size={20} color="Icon/Default" />
                </IconButton>
              }
            >
              {rateTermDetails.map((termGroup) => (
                <div key={termGroup.title} className={styles.terms}>
                  <Typography variant="Body/Paragraph/mdBold">
                    <p>{termGroup.title}</p>
                  </Typography>
                  {termGroup.terms.map((term) => (
                    <Typography key={term}>
                      <p className={styles.term}>
                        <MaterialIcon
                          icon="check"
                          color="Icon/Feedback/Success"
                          size={20}
                          className={styles.termsIcon}
                        />
                        {term}
                      </p>
                    </Typography>
                  ))}
                </div>
              ))}
            </Modal>
            <span id={`${id}-title`}>
              {rateTitle}
              <span className={styles.textSecondary}>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {` / ${paymentTerm}`}
              </span>
            </span>
          </h3>
        </Typography>
        <div id={`${id}-details`}>
          {!isMemberRateActive && rate ? (
            <div className={styles.rateRow}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>{rate.label}</p>
              </Typography>
              <Typography variant="Title/Subtitle/md">
                <p>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${rate.price} `}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span>{rate.unit}</span>
                  </Typography>
                </p>
              </Typography>
            </div>
          ) : null}
          {memberRate ? (
            <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>{memberRate.label}</p>
              </Typography>
              <Typography variant="Title/Subtitle/md">
                <span>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${memberRate.price} `}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span>{memberRate.unit}</span>
                  </Typography>
                </span>
              </Typography>
            </div>
          ) : null}
          {isMemberRateActive && rate ? (
            <Typography variant="Body/Paragraph/mdRegular">
              <div className={`${styles.rateRow} ${styles.strikeThroughRate}`}>
                <s>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${rate.price} `}
                  <Typography variant="Tag/sm">
                    <span>{rate.unit}</span>
                  </Typography>
                </s>
              </div>
            </Typography>
          ) : null}
          {approximateRate ? (
            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>{approximateRate.label}</p>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>
                  {approximateRate.price} {approximateRate.unit}
                </p>
              </Typography>
            </div>
          ) : null}
        </div>
        {omnibusRate ? (
          <footer className={styles.footer}>
            <Typography variant="Tag/sm">
              <p>{omnibusRate.label}</p>
            </Typography>
            <Typography variant="Tag/sm">
              <p>
                {omnibusRate.price} {omnibusRate.unit}
              </p>
            </Typography>
          </footer>
        ) : null}
      </div>
      {isSelected && (
        <MaterialIcon
          icon="check"
          size={22}
          color="Icon/Inverted"
          className={styles.checkIcon}
        />
      )}
    </div>
  )
}