import React, { useState } from "react";
import { Button } from "../button";
import { MaterialIcon } from "../material-icon";
import { SelectPlanButtonProps } from "./types";

import { cx } from "@shared/utils";

export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
  onSelect,
  speed,
  isSelected = false,
  renderCheckPlans,
  iconSize = 24,
  iconClassName,
  cta,
  techType,
  isMax,
}) => {
  const [open, setOpen] = useState(false);
  const className = `btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top ${isSelected ? " bg-bg-surface text-text focus:ring-bg-fill-surface-inverse" : "  bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"} `;
  const renderedCheckPlans = renderCheckPlans?.({
    speedCardConfig: {
      isModalOpen: open,
      setModalOpen: () => {
        setOpen(false);
      },
      speed,
      techType,
      isMax,
    },
    cta: cta,
  });
  const handleSelect = () => {
    setOpen(true);
    onSelect();
  };

  return (
    <>
      <Button
        onClick={handleSelect}
        className={cx(className, `w-full justify-between pl-5 pr-5`)}
        data-track-element-name="speed_plan_select_button"
        data-track-click-text={`Select plan speed ${speed}`}
        data-track-element-clicked="speed_plan_card"
      >
        <span>Select plan</span>
        <MaterialIcon
          className={cx(
            iconClassName,
            isSelected ? "text-icon" : "text-icon-inverse"
          )}
          name="expand_circle_right"
          fill={1}
          size={iconSize}
        />
      </Button>
      {renderedCheckPlans}
    </>
  );
};

export type { SelectPlanButtonProps } from "./types";