/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';

import MaterialSelect, { SelectProps } from '@material-ui/core/Select';
import FormControl, { FormControlProps } from '@material-ui/core/FormControl';
import { ThemeObject } from '../Theme';

const getLabelColor = (theme: ThemeObject, isError: boolean, isFocused = false) => {
  if (isError) return theme.pallet.error;
  return isFocused ? theme.pallet.primaryColor : theme.text.secondary;
};

export const StyledSelect = styled((props: SelectProps & { $theme: ThemeObject; error: boolean }) => (
  <MaterialSelect {...props} />
))`
  && {
    color: ${(props) => props.$theme.text.main};
    border-radius: 10px;
    transition: all 0.25s;
    & .MuiInputBase-root.Mui-disabled {
      color: ${(props) => props.$theme.text.main};
    }
  }
`;

export const StyledFormControl = styled(
  (props: FormControlProps & { $theme: ThemeObject; $error: boolean; $active: boolean }) => <FormControl {...props} />
)`
  && {
    .MuiFormLabel-root {
      color: ${(props) => getLabelColor(props.$theme, props.$error, props.$active)};
      opacity: ${(props) => (props.disabled ? 0.5 : 1)};
    }
    .MuiInputLabel-outlined.MuiInputLabel-shrink {
      transform: translate(15px, -6px) scale(0.85);
    }
    .MuiFormLabel-root.Mui-focused {
      color: ${(props) => getLabelColor(props.$theme, props.$error, true)};
    }
    .MuiSelect-icon {
      color: ${(props) => (props.disabled ? props.$theme.text.secondary : getLabelColor(props.$theme, props.$error, false))};
      opacity: ${(props) => (props.disabled ? 0.5 : 1)};
    }
    .MuiPaper-root {
      background-color: transparent;
    }
  }
`;
