import {ChangeEvent} from "react"
import {IFormData} from "@cd-pkg/core-utils"
import {CheckboxProps} from "../../props"
import {ImageView} from "../image-view"
import styles from "./styles.module.sass"

export const Checkbox = ({
  item,
  items = [],
  wrapperClass = "",
  onSelectItem,
  onSelectItems,
  isEditing,
  name,
}: CheckboxProps) => {
  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]
      selItems[index] = changedData
      onSelectItems(name ? {[name]: selItems} : selItems)
    }
  }

  const renderCheckBox = (option: IFormData, index: number) => {
    const {label, isSelected, disabled, icon} = option

    return (
      <section>
        {!isEditing && (
          <label key={index}>
            <input
              type="checkbox"
              onChange={onChange.bind(null, option, index)}
              checked={isSelected}
              disabled={disabled}
            />
            <span></span>
            {label}
            {icon && <ImageView src={icon} imgSize={20} alt={label} />}
          </label>
        )}
      </section>
    )
  }

  return (
    <div className={`${styles.checkbox_container} flex-col ${wrapperClass}`}>
      {item ? renderCheckBox(item, 0) : items?.map(renderCheckBox)}
    </div>
  )
}