import React from 'react';
import { FormControl, Select, MenuItem } from '@mui/material';
import styled from '@emotion/styled';

const StyledFormControl = styled(FormControl, {
  shouldForwardProp: (prop) => prop !== '$width',
})`
  width: ${(props) => props.$width || '11.25rem'};
`;

const StyledSelect = styled(Select, {
  shouldForwardProp: (prop) => prop !== '$width',
})`
  height: 2rem;
  width: ${(props) => props.$width || '11.25rem'};

  & .MuiOutlinedInput-notchedOutline {
    border-radius: 0.5rem;
    border-color: rgba(0, 0, 0, 0.1);
  }

  &:hover .MuiOutlinedInput-notchedOutline {
    border-color: rgba(0, 0, 0, 0.2);
  }

  & .MuiSelect-select {
    font-size: 0.75rem;
    min-width: 8.25rem;
    padding: 0 1rem;
    color: #374151;
  }
`;

const StyledMenuItem = styled(MenuItem)`
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  min-height: auto;
  z-index: 200;

  &.Mui-selected {
    opacity: 1;
    background: #69a643 !important;
    color: white;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;

    &:hover {
      background-color: #69a643;
    }
  }
`;

const SelectWithOptions = ({
  value,
  onChange,
  options = [],
  width = '11.25rem',
  placeholder = 'Все',
  getOptionLabel,
  getOptionValue,
  renderValue,
  ...props
}) => {
  const isSimpleType = (item) => {
    return typeof item !== 'object' || item === null;
  };

  const defaultGetOptionLabel = (option) => {
    if (!option) return '';
    if (isSimpleType(option)) {
      return String(option);
    }
    return (
      option?.role ||
      option?.name ||
      option?.label ||
      option?.title ||
      String(option)
    );
  };

  const defaultGetOptionValue = (option) => {
    if (!option) return '';
    if (isSimpleType(option)) {
      return option;
    }
    return (
      option?.id ||
      option?.code ||
      option?.value ||
      option?.key ||
      String(option)
    );
  };

  const getLabel = getOptionLabel || defaultGetOptionLabel;
  const getValue = getOptionValue || defaultGetOptionValue;

  const handleChange = (event) => {
    onChange(event.target.value);
  };

  const defaultRenderValue = (selected) => {
    if (!selected && selected !== 0) {
      return <span style={{ color: 'rgba(0,0,0,0.6)' }}>{placeholder}</span>;
    }
    const option = options.find((opt) => {
      const optValue = getValue(opt);
      return optValue === selected || String(optValue) === String(selected);
    });

    if (option) {
      return getLabel(option);
    }

    return String(selected);
  };

  const menuProps = {
    sx: {
      '& .MuiPaper-root': {
        borderRadius: '0.5rem',
        border: '1px solid #e0dfe0',
        padding: '0.38rem',
      },
    },
    style: { zIndex: 1301 },
  };

  return (
    <StyledFormControl $width={width}>
      <StyledSelect
        size="small"
        value={value !== undefined ? value : ''}
        onChange={handleChange}
        displayEmpty
        renderValue={renderValue || defaultRenderValue}
        MenuProps={menuProps}
        $width={width}
        {...props}
      >
        {placeholder !== '' && (
          <StyledMenuItem value="">
            <em>{placeholder}</em>
          </StyledMenuItem>
        )}
        {options.map((option, index) => {
          const optionValue = getValue(option);
          return (
            <StyledMenuItem
              key={optionValue !== undefined ? optionValue : index}
              value={optionValue}
            >
              {getLabel(option)}
            </StyledMenuItem>
          );
        })}
      </StyledSelect>
    </StyledFormControl>
  );
};

export default SelectWithOptions;
