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

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;