import {
  RadioGroup as BaseRadioGroup,
  Radio,
  RadioGroupProps,
} from "@nextui-org/react";
import { ControllerFieldState } from "react-hook-form";
import { useState } from "react";
import Link from "next/link";

import { Options } from "@/types/options/options-data-types";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

// this radio button group currently will only be used for boolean values.

type RadioGroupFormProps = {
  fieldProps: any;
  fieldState: ControllerFieldState;
  data: Options;
  secondaryLabel?: string;
  showPrivacyPolicyLink?: boolean;
  control?: any;
  name?: string;
};

type CheckboxComponentProps = RadioGroupProps & RadioGroupFormProps;

function RadioGroup({
  data,
  label,
  name,
  secondaryLabel,
  fieldProps,
  isRequired = true,
  fieldState,
  showPrivacyPolicyLink,
  classNames = {
    base: "font-noto light text-black",
    wrapper: "gap-3",
    label: "block text-sm font-bold text-black tracking-tight font-inter",
    description:
      "font-inter font-regular text-[12px] text-gray-500 leading-tight",
  },
}: CheckboxComponentProps) {
  const [value, setValue] = useState(fieldProps.value ?? null);
  const linkPrivacyPolicyToUse = `${process.env.NEXT_PUBLIC_PFR_WEBSITE_BASE_URL}/${INTERNAL_PAGES.participant.howItWorks.policies}/participant-data-privacy-policy`;

  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedValue = event.target.value;

    switch (selectedValue) {
      case "0":
        setValue(null);
        fieldProps.onChange(null);
        break;
      case "1":
        setValue(true);
        fieldProps.onChange(true);
        break;
      case "2":
        setValue(false);
        fieldProps.onChange(false);
        break;
      default:
        setValue(null);
        fieldProps.onChange(null);
        break;
    }
  };

  return (
    <BaseRadioGroup
      {...fieldProps}
      classNames={classNames}
      color="default"
      id={fieldProps?.name}
      isInvalid={fieldState.invalid}
      isRequired={isRequired}
      label={label}
      name={name}
      style={{ marginTop: "24px !important", marginBottom: "24px !important" }} // fixes spacing issue
      value={
        value === null ? "0" : value === true ? "1" : value === false ? "2" : ""
      }
      onChange={handleValueChange}
    >
      <div className="inline-flex items-center space-x-2">
        {secondaryLabel && (
          <span className="text-xs text-gray-500 font-inter">
            {secondaryLabel}
            {showPrivacyPolicyLink && (
              <>
                <Link
                  className="underline decoration-dotted underline-thickness-thin hover:underline-thickness-thick hover:text-participant-bittersweet dark:hover:text-participant-cerulean"
                  href={linkPrivacyPolicyToUse}
                >
                  Privacy Policy
                </Link>
                {"."}
              </>
            )}
          </span>
        )}
      </div>
      {data.map((item) => (
        <Radio key={item.id} value={item.id.toString()}>
          {item.title}
        </Radio>
      ))}
    </BaseRadioGroup>
  );
}

export default RadioGroup;