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

const Selectbox = ({
  label,
  name,
  options,
  onChange,
  onChangeWithName,
  selectedValue = '',
  tooltipText = '',
}) => {
  const [curValue, setCurValue] = useState('');
  const [curKey, setKey] = useState(null);

  useEffect(() => {
    if (options && options.length > 0) {
      setCurValue(
        selectedValue !== ''
          ? selectedValue
          : Array.isArray(options)
            ? options[0]
            : Object.values(options)[0],
      );
    }
  }, [options, selectedValue]);

  useEffect(() => {
    if (onChangeWithName && curValue !== '') {
      onChange(name, curValue);
    }

    if (onChange && curValue !== '') {
      onChange(curKey);
    }
  }, [curValue, name, onChange]);

  const handleChange = (e) => {
    const selectedIndex = e.target.value;
    if (Array.isArray(options)) {
      setCurValue(options[selectedIndex]);
    } else {
      const key = Object.keys(options)[selectedIndex];
      setCurValue(options[key]);
      setKey(key);
    }
  };

  const getSelectedIndex = () => {
    if (Array.isArray(options)) {
      return options.indexOf(curValue);
    } else {
      return Object.values(options).indexOf(curValue);
    }
  };

  return (
    <SelectDiv>
      <label>
        {label}
        <select name={name} onChange={handleChange} value={getSelectedIndex()}>
          {options &&
          (Array.isArray(options) ? options : Object.values(options)).length >
            0 ? (
            Array.isArray(options) ? (
              options.map((option, index) => (
                <option key={index} value={index}>
                  {option}
                </option>
              ))
            ) : (
              Object.entries(options).map(([key, value], index) => (
                <option key={key} value={index}>
                  {value}
                </option>
              ))
            )
          ) : (
            <option value="">Нет доступных опций</option>
          )}
        </select>
      </label>

      {tooltipText !== '' && <Tooltip tooltipText={tooltipText} />}
    </SelectDiv>
  );
};

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

  label {
    color: inherit;
    font-size: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  select {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 1.6rem;
    min-height: 36px;
    background-color: rgb(240, 242, 246);
    padding: 0 0.4rem;
    font-size: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease;
    color: inherit;

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

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

    option {
      color: #333;
      background-color: white;
    }
  }

  @media (max-width: 768px) {
    select {
      height: 2rem;
      min-height: 39px;
      font-size: 13px;
    }
  }

  @media (max-width: 480px) {
    label {
      font-size: 0.73rem;
    }

    select {
      height: 2.3rem;
      min-height: 42px;
      padding: 0 0.6rem;
    }
  }
`;

export default Selectbox;
