import { useLocale } from "next-intl";
import React from "react";

const Input = ({
  id,
  lable,
  name,
  type,
  textarea,
  mt,
  disabled,
  theme,
  inputEvent,
  inputFocus,
  style,
  value,
  readOnly,
  validator,
  validatorData,
  select,
  selectData,
  defaultValue,
}) => {
  const locale = useLocale();
  const isRTL = locale === "fa";
  return (
    <div
      class={`relative ${mt ? `mt-${mt}` : "mt-8"} ${
        disabled ? "opacity-40" : ""
      } ${isRTL ? "!text-right" : "!text-left"}`}
    >
      {textarea ? (
        <textarea
          type="text"
          className={`peer w-full border-b placeholder:text-transparent relative rtl !text-sm ${
            theme == 1 ? "form-control-white" : "form-control"
          } ${isRTL ? "!text-right" : "!text-left"}`}
          placeholder={name}
          disabled={disabled ? true : false}
          readOnly={readOnly ? true : false}
          value={value}
          onChange={inputEvent}
          id={id}
        />
      ) : select ? (
        <select
          className={`peer w-full border-b placeholder:text-transparent rtl text-sm ${
            theme == 1 ? "form-control-white" : "form-control"
          }  ${style ? style : ""} relative ${
            isRTL ? "!text-right" : "!text-left"
          }`}
          placeholder={name}
          disabled={disabled ? true : false}
          readOnly={readOnly ? true : false}
          value={value}
          onChange={inputEvent}
          id={id}
          defaultValue=""
        >
          {defaultValue && (
            <option value="" disabled hidden>
              {defaultValue}
            </option>
          )}

          {selectData &&
            selectData.map((e) => (
              <option className="text-sm" value={e.value}>
                {e.key}
              </option>
            ))}
        </select>
      ) : (
        <input
          type={type}
          id={id}
          className={`peer w-full border-b placeholder:text-transparent rtl !text-sm ${
            theme == 1 ? "form-control-white" : "form-control"
          }  ${style ? style : ""} relative ${
            isRTL ? "!text-right" : "!text-left"
          }`}
          placeholder={name}
          disabled={disabled ? true : false}
          readOnly={readOnly ? true : false}
          value={value}
          onChange={inputEvent}
          onFocus={inputFocus}
        />
      )}

      <div className="flex justify-start w-full absolute mt-[-2px]">
        <small className="absolute ">
          {" "}
          {validator ? <>{validatorData}</> : ""}
        </small>
      </div>

      <label
        htmlFor={id}
        className={`absolute  mr-3 px-1 -translate-y-3 ${
          theme == 1 ? "bg-white" : "bg-body-100"
        } ${
          isRTL ? "right-0" : "left-3"
        }  text-sm duration-100 ease-linear peer-placeholder-shown:translate-y-[15px] peer-placeholder-shown:text-base  peer-placeholder-shown:text-gray-500 peer-focus:mr-6 peer-focus:-translate-y-3 peer-focus:px-1 peer-focus:text-sm`}
      >
        {lable}
      </label>

      {/* <small>رمز اشتباه</small> */}
    </div>
  );
};

export default Input;