import React, { useState } from "react"; import _ from "lodash"; const langDetector = (lang, option1, option2) => { return lang === "fa" ? option1 : option2; }; const inputStatusHandler = (value, focus, status, primary, success, danger) => { if (!focus) { return ""; } else { if (!value) { return primary; } else { if (status) { return success; } else { return danger; } } } }; export default function Input({ backgroundColor, lang, theme, inputMode, label, status, maxLength, message, onChange, align, name, regex, direction, width, title, borderType, gapSize, id, type, className, style, bg}) { const [value, setValue] = useState(""); const [focusToggle, setFocusToggle] = useState(false); // const { // } = props; const focusHandler = (id) => { let inputs = document.querySelectorAll(".Login-box-form-item"); let label = document.querySelectorAll(".Login-box-form-item-label"); let line = document.querySelectorAll(".Login-box-form-item-line"); inputs[id].style.borderColor = "#df1452"; inputs[id].style.backgroundColor = "#fff"; label[id].style.transform = `translate(-10px,-27px)`; label[id].style.color = "#df1452"; line[id].style.backgroundColor = "#fff"; }; const blurHandler = (id) => { let inputsBox = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item-input"); let label = document.querySelectorAll(".Login-box-form-item-label"); let line = document.querySelectorAll(".Login-box-form-item-line"); if (inputs[id]?.value === "") { inputsBox[id].style.borderColor = "#EBEBEB"; label[id].style.transform = "translate(0px,0px)"; label[id].style.color = "#959595"; line[id].style.backgroundColor = "#EBEBEB"; } }; return (