import { Rate } from '../types'

import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import InfoCircleIcon from '../../Icons/InfoCircle'
import CheckCircleIcon from '../../Icons/CheckCircle'
import { variants } from '../variants'

interface RegularRateCardProps {
  name: string
  value: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
  rate?: Rate
  memberRate?: Rate
  approximateRate: Rate
  hidePublicRate?: boolean
  handleChange: () => void
  handleTermsClick?: () => void
}

export default function RegularRateCard({
  name,
  value,
  isSelected,
  rateTitle,
  paymentTerm,
  approximateRate,
  rate,
  memberRate,
  hidePublicRate,
  handleChange,
  handleTermsClick,
}: RegularRateCardProps) {
  const classNames = variants({ variant: 'Regular' })
  return (
    <label>
      <input
        className={styles.radio}
        type="radio"
        name={name}
        value={value}
        checked={isSelected}
        onChange={handleChange}
      />
      <div className={classNames}>
        <div className={styles.container}>
          <header>
            <Typography variant="Tag/sm">
              <h3 className={styles.title}>
                <Button
                  variant="Icon"
                  color="IconDefault"
                  size="Small"
                  onPress={handleTermsClick}
                >
                  <InfoCircleIcon height={20} width={20} />
                </Button>
                {rateTitle}
                <span className={styles.textSecondary}>
                  {` / ${paymentTerm}`}
                </span>
              </h3>
            </Typography>
            <div className={styles.checkIcon}>
              <CheckCircleIcon width={24} height={24} />
            </div>
          </header>
          <div>
            {!hidePublicRate && rate ? (
              <div className={styles.rateRow}>
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <p>{rate.label}</p>
                </Typography>
                <Typography variant="Title/Subtitle/md">
                  <p>
                    {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">
                  <p>
                    {memberRate.price}{' '}
                    <Typography variant="Body/Supporting text (caption)/smBold">
                      <span>{memberRate.unit}</span>
                    </Typography>
                  </p>
                </Typography>
              </div>
            ) : null}
            <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>
          </div>
        </div>
      </div>
    </label>
  )
}