import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";

import { Label } from "@/components/label";
import { BADGE_COMPONENTS } from "@/components/svg/badges";
import { BadgeType } from "@/types/badge";
import { useUser } from "@/utils/auth";
import { PremiumContext } from "@/components/premium/premium";
import { useContext } from "react";
import { Premium } from "@/components/premium";

export const SelectShapes = ({
  badge,
  onChange,
}: {
  badge: BadgeType;
  onChange: (b: BadgeType) => void;
}) => {
  const { user } = useUser();
  const { setOpen } = useContext(PremiumContext);
  return (
    <div>
      <Label className="mb-2">Shapes</Label>
      <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
        {BADGE_COMPONENTS.map((component, i) => {
          const Component = component.mini as any;
          return (
            <div
              key={i}
              className={classNames(
                "flex items-center justify-start gap-2 cursor-pointer",
                {
                  "opacity-50 relative": component.isPremium && !user,
                }
              )}
              onClick={
                component.isPremium && !user
                  ? () => setOpen(true)
                  : () =>
                      onChange({
                        ...badge,
                        type:
                          component?.name === badge?.type
                            ? "circle"
                            : component.name,
                      })
              }
            >
              <div
                className={classNames(
                  "w-5 h-5 min-w-[1.25rem] border-2 rounded flex items-center justify-center",
                  {
                    "bg-green bg-opacity-60 border-green":
                      badge?.type === component.name,
                    "border-dark-200": badge?.type !== component.name,
                  }
                )}
              >
                {badge?.type === component.name && (
                  <FontAwesomeIcon
                    icon={faCheck}
                    className="w-3 text-white text-opacity-100"
                  />
                )}
              </div>
              <Component />
            </div>
          );
        })}
      </div>
    </div>
  );
};