import styled, { css } from 'styled-components';
import { convertToTransientProps, getColorAlias, getFontSize, getDefaultTransition } from '../../../utils/index.js';
import { getFieldPadding } from '../utils.js';

const TextFieldInput = styled.input.withConfig({
    shouldForwardProp: convertToTransientProps(['hasError']),
}) `
  color: ${getColorAlias('contentDefault')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  background: ${(props) => props.disabled ? getColorAlias('disabled01') : 'transparent'};
  ${getFontSize('size16')};
  ${(props) => getFieldPadding(props.variant)};
  border-radius: ${(props) => props.theme.radius.roundedC};
  border: unset;
  width: 100%;
  ${getDefaultTransition('background')};

  &::placeholder {
    color: ${(props) => props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentSubdued')};
    font-weight: ${(props) => props.theme.font.weightRegular};
  }

  &:hover {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'auto')};
  }

  &:focus:hover {
    background: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getColorAlias('containerDefault')};
  }

  &:focus {
    outline: none;
    ${(props) => !props.hasError &&
    css `
        border: none;
      `};
  }
`;
const PrefixSufix = styled.div `
  display: flex;
  color: ${getColorAlias('contentDefault')};
  ${getFontSize('size16')};
  svg {
    color: ${getColorAlias('contentDefault')};
    height: 24px;
    width: 24px;
  }
`;
const Prefix = styled(PrefixSufix) ``;
const Sufix = styled(PrefixSufix) `
  cursor: ${(props) => (props.hasHandler ? 'pointer' : 'auto')};
`;

export { Prefix, PrefixSufix, Sufix, TextFieldInput };
