"use client"

import {ChangeEvent, useState} from "react"
import {TextAreaProps} from "../../props"
import styles from "./styles.module.sass"

export const TextArea = (props: TextAreaProps) => {
  const {
    onChangeData,
    label = "",
    error,
    disabled = false,
    isRequired = true,
    maxLength,
    wrapperClass = "",
    id = label ? `${label}-${Math.random()}` : `text_area-${Math.random()}`,
  } = props
  const [length, setLength] = useState(0)
  const onChangeValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value.trimStart()
    const key = e.target.name
    const data = {[key]: value}
    data[key] = value
    setLength(value.length)
    onChangeData(key ? data : value)
  }

  return (
    <div className={styles.text_area_container}>
      <section className={styles.text_area_wrapper} data-error={!!error} data-disabled={!!disabled}>
        <textarea
          id={id}
          className={wrapperClass}
          onChange={onChangeValue}
          disabled={disabled}
          maxLength={maxLength}
          placeholder="Text area"
          {...props}
        />
        <label htmlFor={id}>
          {label}
          {isRequired && " *"}
        </label>
      </section>
      {maxLength && (
        <h5 className={styles.character_count}>
          {length}/{maxLength} characters
        </h5>
      )}
      {error && <p className="error-text">{error}</p>}
    </div>
  )
}