"use client"

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

export const DropDown = (props: DropDownProps) => {
  const {
    wrapperClass = "",
    onChangeData,
    error,
    selected,
    options = [],
    label,
    placeholder,
    disabled,
    isRequired = true,
    id = label ? `${label}-${Math.random()}` : `drop_down-${Math.random()}`,
  } = props

  const onChangeValue = (e: ChangeEvent<HTMLSelectElement>) => {
    const selIndex = e.target.selectedIndex - 1
    const {name} = e.target
    const value = options[selIndex]
    const data = {[name]: value}

    onChangeData(name ? data : value, selIndex)
  }

  const renderOptions = (option: IFormData | string | number, index: number) => (
    <option key={index}>{typeof option === "object" ? option?.label : option}</option>
  )

  return (
    <div className={`${styles.dropdown_container} ${wrapperClass}`}>
      <div
        className={styles.dropdown_wrapper}
        data-error={!!error}
        data-disabled={!!disabled}
        data-selected={
          (typeof selected === "string" && !!selected) ||
          (typeof selected === "number" && !isNaN(selected)) ||
          (typeof selected === "object" && !!selected?.label)
        }>
        <select
          {...props}
          id={id}
          disabled={disabled}
          onChange={onChangeValue}
          value={typeof selected !== "object" ? selected : selected?.label}>
          <option hidden>{placeholder}</option>
          {Array.isArray(options) && options.map(renderOptions)}
        </select>
        <label htmlFor={id} className={styles.dropdown_label}>
          {label} {isRequired && " *"}
        </label>
      </div>
      {error && <label className="error-text">{error}</label>}
    </div>
  )
}