import { Box, Badge } from 'components/common';
import { Quotas, UserQuota } from './Quotas';

import { formatCurrency } from 'utils';

interface ProductPriceProps {
  price: number;
  campaignPrice?: number | null;
  billingCycle?: string;
}

export const ProductPrice = ({
  price,
  campaignPrice,
  billingCycle,
}: ProductPriceProps) => {
  return (
    <div className="fz14">
      {campaignPrice ? (
        <span>
          <span style={{ textDecoration: 'line-through' }}>
            &nbsp;{formatCurrency(price)}&nbsp;
          </span>
          <span className="bold paddingX1 rounded2">
            {formatCurrency(campaignPrice)}
          </span>
        </span>
      ) : (
        <span className="bold">{formatCurrency(price)}</span>
      )}
      {billingCycle && <span> / {billingCycle}</span>}
    </div>
  );
};

interface SubscriptionPlanProps {
  name: string;
  description: string;
  price: number;
  campaignPrice?: number | null;
  campaignCode?: string | null;
  isCurrent?: boolean;
  quota?: UserQuota[];
}

export const SubscriptionPlan = ({
  name,
  description,
  price,
  campaignPrice,
  campaignCode,
  isCurrent,
  quota,
}: SubscriptionPlanProps) => {
  return (
    <div className="w100 spacingY8">
      <div className="spacingY2">
        <div className="w100 flex alignCenter justifyBetween">
          <div className="spacing2">
            <span className="bold">{name}</span>
            {isCurrent && (
              <Badge className="fz12" bold uppercase>
                Current plan
              </Badge>
            )}
          </div>
          <ProductPrice
            price={price}
            campaignPrice={campaignPrice}
            billingCycle="month"
          />
        </div>
        <div className="flex alignCenter justifyBetween">
          <div className="fz14 c-gray">{description}</div>
          {campaignCode && (
            <Badge className="fz12" color="orange" title="Campaign name">
              {campaignCode}
            </Badge>
          )}
        </div>
      </div>
      {quota && quota.length > 0 && <Quotas data={quota} />}
    </div>
  );
};

export interface SubscriptionPlansProps {
  items: {
    id: string;
    name: string;
    prices: {
      price: number;
      campaignPrice: number | null;
    }[];
    description: string;
    campaignCode: string | null;
    quotas: UserQuota[];
  }[];
  inputName: string;
  currentPlan: string;
  billingCycle: string;
  checked: string;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
}

export const SubscriptionPlans = ({
  items,
  inputName,
  currentPlan,
  billingCycle,
  checked,
  onChange,
}: SubscriptionPlansProps) => {
  const isAnnual = billingCycle === 'annual';
  return (
    <Box
      className="rounded4 oh"
      style={{ border: '1px solid var(--borderColor)' }}
    >
      {items?.map((item) => {
        const [year, month] = item.prices;
        return (
          <label
            className="flex alignStart spacing2 paddingX4 hover1"
            key={item.id}
          >
            <input
              className="marginY5"
              style={{ transform: `translateY(2px)` }}
              type="radio"
              name={inputName}
              value={item.name}
              checked={item.name === checked}
              onChange={onChange}
            />
            <div className="w100 paddingY4">
              <SubscriptionPlan
                name={item.name}
                description={item.description}
                price={isAnnual ? year.price : month.price}
                campaignPrice={
                  isAnnual ? year.campaignPrice : month.campaignPrice
                }
                campaignCode={item.campaignCode}
                isCurrent={item.name === currentPlan}
                quota={item.name === checked ? item.quotas : undefined}
              />
            </div>
          </label>
        );
      })}
    </Box>
  );
};