import { useState } from 'react';
import styled from '@emotion/styled';

import Tooltip from './Tooltip';

const TextInput = ({
  label,
  name,
  type = 'text',
  onChange,
  onChangeWithName,
  tooltipText = '',
  value = '',
  placeholder = '',
  autocomplete = 'new-password',
}) => {
  const [cur_value, setCurValue] = useState(value);
  const [isFocused, setIsFocused] = useState(false);

  const handleChange = (inputValue) => {
    if (onChangeWithName) {
      onChangeWithName(name, inputValue);
    }

    if (onChange) {
      onChange(inputValue);
    }
  };

  return (
    <TextInputDiv>
      <label>
        {label}
        <input
          type={type}
          name={name}
          onChange={(e) => {
            setCurValue(e.target.value);
            if (!isFocused) {
              handleChange(e.target.value);
            }
          }}
          onBlur={() => {
            handleChange(cur_value);
            setIsFocused(false);
          }}
          onFocus={() => setIsFocused(true)}
          value={cur_value}
          autoComplete={autocomplete}
          placeholder={placeholder}
        />
      </label>
      {tooltipText !== '' && <Tooltip tooltipText={tooltipText} />}
    </TextInputDiv>
  );
};

const TextInputDiv = styled.div`
  position: relative;
  width: 100%;

  label {
    color: inherit;
    font-size: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem; /* Уменьшено еще на 10% (0.225rem * 0.9) */
  }

  input {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 1.6rem; /* Уменьшено еще на 10% (1.8rem * 0.9) */
    min-height: 36px; /* Уменьшено еще на 10% (40px * 0.9) */
    background-color: rgb(240, 242, 246);
    padding: 0 0.4rem; /* Уменьшено еще на 10% (0.45rem * 0.9) */
    font-size: inherit;
    transition: border-color 0.2s ease;

    &:focus {
      outline: none;
      border-color: #258141;
      box-shadow: 0 0 0 2px rgba(37, 129, 65, 0.1);
    }

    &:hover {
      border-color: #999;
    }
  }

  /* Медиа-запросы для адаптивности */
  @media (max-width: 768px) {
    input {
      height: 2rem; /* Уменьшено еще на 10% (2.25rem * 0.9) */
      min-height: 39px; /* Уменьшено еще на 10% (43px * 0.9) */
      font-size: 13px; /* Уменьшено еще на 10% (14.4px * 0.9) */
    }
  }

  @media (max-width: 480px) {
    label {
      font-size: 0.73rem; /* Уменьшено еще на 10% (0.81rem * 0.9) */
    }

    input {
      height: 2.3rem; /* Уменьшено еще на 10% (2.52rem * 0.9) */
      min-height: 42px; /* Уменьшено еще на 10% (47px * 0.9) */
      padding: 0 0.6rem; /* Уменьшено еще на 10% (0.675rem * 0.9) */
    }
  }
`;

export default TextInput;