import React, { useEffect, useState } from "react";

import styles from "./RadioButtonsView.module.scss";

type RadioButtonsT = {
  id: string;
  label: string;
  disabled?: boolean;
  handleClick: (e: any) => void;
  theme?: "light" | "dark";
  defaultValue?: string;
};

const RadioButtonsView = (props: RadioButtonsT) => {
  const {
    id,
    disabled,
    handleClick,
    label,
    theme = "light",
    defaultValue,
  } = props;

  const [isRadioButtonChosen, setIsRadioButtonChosen] = useState(() => {
    return defaultValue ? defaultValue : "Yes";
  });

  const handleChooseButton = (id: string) => {
    setIsRadioButtonChosen(id);
    handleClick(id);
  };

  return (
    <div
      className={
        theme === "light"
          ? styles.mainWrapperLightTheme
          : styles.mainWrapperDarkTheme
      }
      data-id={id}
    >
      <p className={styles.label}>{label}</p>
      <div className={styles.radioButtonsWrapper}>
        <div className={styles.radioButtonWrapperInner}>
          <div
            id={"radioButtonYes"}
            className={
              isRadioButtonChosen === "Yes"
                ? styles.radioButtonOuter
                : `${styles.radioButtonOuterUnckecked} ${styles.radioButtonOuter}`
            }
            onClick={(id) => {
              handleChooseButton("Yes");
            }}
          >
            <div
              className={
                isRadioButtonChosen === "Yes"
                  ? styles.radioButtonInner
                  : `${styles.radioButtonInner} ${styles.radioButtonInnerUnckecked}`
              }
            />
          </div>
          <p className={styles.labelInner}>Yes</p>
        </div>
        <div className={styles.radioButtonWrapperInner}>
          <div
            className={
              isRadioButtonChosen === "No"
                ? styles.radioButtonOuter
                : `${styles.radioButtonOuterUnckecked} ${styles.radioButtonOuter}`
            }
            id={"radioButtonNo"}
            onClick={(id) => {
              handleChooseButton("No");
            }}
          >
            <div
              className={
                isRadioButtonChosen === "No"
                  ? styles.radioButtonInner
                  : `${styles.radioButtonInner} ${styles.radioButtonInnerUnckecked}`
              }
            />
          </div>
          <p className={styles.labelInner}>No</p>
        </div>
      </div>
    </div>
  );
};

export default RadioButtonsView;