import styled from 'styled-components';
import { InputAdornment, TextField } from '@material-ui/core';

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 StyledTextField = styled(TextField).attrs((props: { $theme: ThemeObject; error: boolean; $active: boolean }) => ({
  $theme: props.$theme,
  error: props.error,
  $active: props.$active,
}))`
  && {
    .MuiInputBase-input {
      color: ${(props) => props.$theme.text.main};
    }
    .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;
    }
  }
`;

export const StyledAdornment = styled(InputAdornment).attrs(
  (props: { $theme: ThemeObject; $error: boolean; $active: boolean }) => ({
    $theme: props.$theme,
    $error: props.$error,
    $active: props.$active,
  })
)`
  && {
    color: ${(props) => getLabelColor(props.$theme, props.$error, props.$active)};
  }
`;
