import { Card } from "../Card";
import { Button } from "../Button";
import { Badge } from "../Badge";
import Accordion from "react-bootstrap/Accordion";
import { decode } from "html-entities";

export interface PlanFeatures {
  term_id: number;
  name: string;
  svg: string;
  description: string | false;
  customValue: string | boolean;
}

export interface Plan {
  id: number;
  title: "Lite" | "Smart" | "Pro";
  price: number;
  features: PlanFeatures[];
  highlightFeatures: PlanFeatures[];
  allFeatures: PlanFeatures[];
  productID: number;
}

type Props = {
  plan: Plan;
  selectPlan?: (...args: unknown[]) => unknown;
  fullWidth?: boolean;
};

export function renderPrice(price: number): string {
  if (typeof price === "string") return "";

  return (
    price.toFixed(2).split(".").join('.<span class="font-size-sm">') + "</span>"
  );
}

const BadgeLabel = {
  Lite: false,
  Smart: "Best Value",
  Pro: "Most Secure",
};

const PlanCard = ({
  plan: { id, title, price, highlightFeatures },
  selectPlan,
  fullWidth,
}: Props) => {
  return (
    <Card className={`plan-${title.toLowerCase()}`} fullWidth={fullWidth}>
      <div className="d-flex justify-content-between">
        <div>
          <h3>{title}</h3>
          {BadgeLabel[title] && <Badge>{BadgeLabel[title]}</Badge>}
        </div>

        {/* PRICE */}
        <div className="text-center price bundle-item-block__price woocommerce-Price-amount">
          {price > 0 ? (
            <span
              className="fs-4 fw-bold text-primary"
              dangerouslySetInnerHTML={{
                __html: `&pound;${renderPrice(price)}`,
              }}
            />
          ) : (
            <span className="fs-4 fw-bold text-primary">Free</span>
          )}
          <p className="per-month fw-normal fs-xsmall mt-2 text-right">
            {price > 0 && "per month"}
          </p>
        </div>
      </div>

      {/* FEATURES */}
      <Accordion className="features-list mb-4">
        {highlightFeatures.map((feature) => {
          return (
            <Accordion.Item
              bsPrefix=" "
              eventKey={`${feature.term_id}`}
              key={feature.term_id}
              className="features-list__feature"
            >
              <Accordion.Button bsPrefix=" " className="feature-name">
                <span
                  className="feature-icon"
                  dangerouslySetInnerHTML={{
                    __html: feature.svg,
                  }}
                />

                <div className="feature-name__text">{decode(feature.name)}</div>
                <span className="chevron">{/* <ChevronDown /> */}</span>
              </Accordion.Button>
              <Accordion.Body bsPrefix=" " className="feature-description">
                <div className="description">
                  <p className="mb-0">{feature.description}</p>
                </div>
              </Accordion.Body>
            </Accordion.Item>
          );
        })}
      </Accordion>
      <Button
        className="mt-auto"
        variant="primary"
        fullWidth
        onClick={(e) => {
          // @ts-ignore
          e.preventDefault();

          if (!selectPlan) return;

          selectPlan(id);
        }}
      >
        Select Plan
      </Button>
    </Card>
  );
};

export { PlanCard };
