/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import cn from 'classnames';
import InputLabel from '@material-ui/core/InputLabel';
import omit from 'lodash/omit';

import { StyledAdornment } from '../Input/styled-component';
import { HelperText } from '../Helper-Text';
import { useTheme } from '../Theme';
import { StyledFormControl, StyledSelect } from './styled-components';
import { SelectProps } from './types.d';
import { StyledMenuItem } from '../Menu/styled-components';
import { Tooltip } from '../Tooltip';

export const Select: FunctionComponent<SelectProps> = (props) => {
  const {
    className = '',
    containerStyle = {},
    data,
    disableUnderline = false,
    disabled = false,
    helperText,
    hideLabel,
    icon,
    isError = false,
    label,
    name,
    onChange = () => {},
    onSelect,
    rightIcon,
    size = 'medium',
    tooltip = '',
    value,
    variant = 'outlined',
  } = props;
  const theme = useTheme();
  const classNames = cn({
    'square-select': true,
    [className]: true,
    disabled,
    [size]: true,
    icon: !!icon,
  });

  const formClassNames = cn({
    'square-select-container': true,
    icon: !!icon,
    [size]: true,
  });

  const labelClassNames = cn({
    'square-select-label': true,
    icon: !!icon,
    [size]: true,
  });

  const isActive = value !== '';

  const showPlaceholder = !(hideLabel && isActive);

  const renderLabel = () => {
    if ((hideLabel || icon) && isActive) return null;
    const shrink = hideLabel || icon ? false : undefined;
    return (
      <InputLabel shrink={shrink} className={labelClassNames}>
        {label}
      </InputLabel>
    );
  };
  return (
    <Tooltip title={tooltip}>
      <StyledFormControl
        $active={isActive}
        $error={isError}
        $theme={theme}
        className={formClassNames}
        disabled={disabled}
        error={isError}
        style={containerStyle}
        variant={variant}
      >
        {renderLabel()}
        <StyledSelect
          {...omit(
            props,
            'helperText',
            'tooltip',
            'formClassNames',
            'isError',
            'isActive',
            'containerStyle',
            'size',
            'hideLabel',
            'icon',
            'rightIcon'
          )}
          disableUnderline={disableUnderline}
          startAdornment={
            icon && (
              <StyledAdornment $theme={theme} $error={isError} $active={isActive} position="start">
                {icon}
              </StyledAdornment>
            )
          }
          endAdornment={
            rightIcon && (
              <StyledAdornment $theme={theme} $error={isError} $active={isActive} position="end">
                {rightIcon}
              </StyledAdornment>
            )
          }
          displayEmpty={showPlaceholder}
          name={name}
          className={classNames}
          error={isError}
          label={hideLabel || icon ? undefined : label}
          $theme={theme}
          value={value}
          onChange={onChange}
          onSelect={onSelect}
          MenuProps={{
            elevation: -10,
            anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'left',
            },
            transformOrigin: {
              vertical: 'top',
              horizontal: 'left',
            },
            getContentAnchorEl: null,
          }}
        >
          {data.map((item) => (
            <StyledMenuItem value={item.value ?? ''} key={item.value} $theme={theme}>
              {item.name}
            </StyledMenuItem>
          ))}
        </StyledSelect>
        {helperText ? <HelperText error={isError}>{helperText}</HelperText> : null}
      </StyledFormControl>
    </Tooltip>
  );
};
