import {ImageView} from "../../atoms"
import {ChipItemProps, ChipProps} from "../../props"
import styles from "./styles.module.sass"

export const Chip = (props: ChipProps) => {
  const {
    chip,
    chips = [],
    onSelectItems,
    onSelectItem,
    wrapperClass = "",
    children,
    isMultiple = false,
    leadingIcon,
    onClickTrailingIcon,
    onClickLeadingIcon,
    trailingIcon,
    label,
    isRequired,
  } = props

  const renderChip = (item: ChipItemProps, index: number) => {
    const {label, avatar, isSelected, defaultChipClass = "", selChipClass = "", onClick} = item

    const onSelect = () => {
      if (onSelectItems) {
        if (isMultiple) {
          const item = chips[index]
          item.isSelected = !item.isSelected
          const items = [...chips]
          items[index] = item
          onSelectItems(items)
        } else
          onSelectItems(chips.map((item, position) => ({...item, isSelected: position === index && !item.isSelected})))
      } else if (onSelectItem) {
        onSelectItem({...item, isSelected: !item.isSelected})
      } else if (onClick) {
        onClick(index, item)
      }
    }

    return (
      <li
        data-selected={isSelected}
        onClick={onSelect}
        className={`flex-center ${isSelected ? selChipClass : defaultChipClass}`}>
        {(leadingIcon || avatar) && (
          <ImageView
            data-avatar={!!avatar}
            wrapperClass={styles.chip_icon}
            alt="avatar"
            src={avatar || leadingIcon!}
            onClick={onClickLeadingIcon}
          />
        )}
        <h6>{label}</h6>
        {trailingIcon && (
          <ImageView wrapperClass={styles.chip_icon} alt="trailing" src={trailingIcon} onClick={onClickTrailingIcon} />
        )}
      </li>
    )
  }

  return (
    <section className={`${styles.chip_section} flex-center ${wrapperClass}`} {...props}>
      {label && (
        <h4 className={styles.chip_label}>
          {label} {isRequired && <small className="required_icon">*</small>}
        </h4>
      )}
      {chip ? renderChip(chip, 0) : chips?.map(renderChip)}
      {children}
    </section>
  )
}