import {IFormData} from "@fanam-pkg/core-utils"
import {ChangeEvent} from "react"
import {RadioButtonProps} from "../../props"
import styles from "./styles.module.sass"

export const RadioButton = ({
  item,
  items = [],
  onSelectItem,
  onSelectItems,
  wrapperClass = "",
  name,
  radioGroupName = item ? "radio-item" : "radio-group",
  label,
  isRequired,
}: RadioButtonProps) => {
  const onChange = (selItem: IFormData, index: number, event: ChangeEvent<HTMLInputElement>) => {
    const isSelected = event.target.checked
    const changedData = {...selItem, isSelected}
    if (item && onSelectItem) onSelectItem(name ? {[name]: changedData} : changedData)
    else if (onSelectItems) {
      const selItems = items.map((option, position) => ({...option, isSelected: position === index}))
      onSelectItems(name ? {[name]: selItems} : selItems)
    }
  }

  const renderOption = (option: IFormData, index: number) => {
    const {label, isSelected} = option

    return (
      <label key={index}>
        <input type="radio" onChange={onChange.bind(null, option, index)} checked={isSelected} name={radioGroupName} />
        <span className={styles.checkmark}></span>
        {label}
      </label>
    )
  }

  return (
    <div className={`${wrapperClass} ${styles.radio_button_section} flex-col`}>
      {label && (
        <h4 className={styles.radio_label}>
          {label} {isRequired && <small className="required_icon">*</small>}
        </h4>
      )}
      {item ? renderOption(item, 0) : items?.map(renderOption)}
    </div>
  )
}