import React, { useState } from "react";
import { RadioGroupProps, RadioProps } from "../../data/Props";
import { CommonTitle } from "../title/CommonTitle";
import RadioGroupStyle from "./radio_group.module.css";

function Radio(props: RadioProps) {
  const selected = props.selectedValue === props.value;
  return (
    <div className={RadioGroupStyle.radio} style={props.style} onClick={props.onClick}>
      <div className={`${RadioGroupStyle.cycle} ${selected ? RadioGroupStyle.cycle_selected : null}`}>
        <div
          className={`${RadioGroupStyle.cycle_center} ${selected ? RadioGroupStyle.cycle_center_selected : null}`}
        ></div>
      </div>
      <div className={`${RadioGroupStyle.title} ${selected ? RadioGroupStyle.title_selected : null}`}>
        {props.label}
      </div>
    </div>
  );
}

function RadioGroupContainer(props: RadioGroupProps) {
  const [selectedValue, setSelectedValue] = useState(props.defaultValue);
  const radios = props.options.map((option, index) => (
    <Radio
      {...option}
      style={{ marginLeft: index === 0 ? 0 : "15pt" }}
      selectedValue={selectedValue}
      onClick={() => {
        setSelectedValue(option.value);
        props.valueChanged(option);
      }}
    ></Radio>
  ));
  return <div className={RadioGroupStyle.radio_container}>{radios}</div>;
}

export function RadioGroup(props: RadioGroupProps) {
  return (
    <div className={RadioGroupStyle.container} style={props.styles}>
      <CommonTitle title={props.title} must={props.must}></CommonTitle>
      <RadioGroupContainer {...props}></RadioGroupContainer>
    </div>
  );
}
