import { convertToTransientProps, getColorAlias, getDefaultTransition, getDarkenColor, getSpacing, getFontSize } from '../../utils/index.js';
import styled, { css } from 'styled-components';
import { getFieldPadding } from '../Field/utils.js';
import { IconButtonContainer } from '../IconButton/styles.js';

const Wrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['fullWidth']),
}) `
  width: ${(props) => (props.fullWidth ? '100%' : '300px')};
  font-family: ${(props) => props.theme.font.familyPrimary};
`;
const Border = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasLabel',
        'hasError',
        'stepperVariant',
    ]),
}) `
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: ${(props) => props.disabled &&
    props.stepperVariant &&
    props.stepperVariant.includes('input-form')
    ? getColorAlias('disabled01')
    : 'transparent'};
  ${getDefaultTransition()};

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

  ${IconButtonContainer} {
    position: relative;
    top: 0px;
    left: 0px;
  }

  ${(props) => props.stepperVariant === 'input-form' &&
    css `
      border: 1px solid
        ${!props.disabled && props.hasError
        ? getColorAlias('contentError')
        : getColorAlias('containerDark')};

      border-radius: ${(props) => props.theme.radius.roundedD};

      &:hover {
        background: ${!props.disabled &&
        getDarkenColor('hover01', 'backgroundDefault')};
      }
    `}
`;
const NumberField = styled.input.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasError',
        'hasLabel',
        'stepperVariant',
        'buttonsDisabled',
        'componentHeight',
    ]),
}) `
  color: ${getColorAlias('contentSubdued')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  background: ${({ stepperVariant, buttonsDisabled }) => stepperVariant === 'input' && buttonsDisabled
    ? getColorAlias('disabled01')
    : 'transparent'};
  ${(props) => getFieldPadding(props.componentHeight)};
  border: none;
  width: 50%;
  text-align: center;

  ::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: ${getSpacing('s00')};
  }

  ${getFontSize('size16')};
  ${getDefaultTransition()};

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

  ${({ stepperVariant, buttonsDisabled, hasError }) => {
    switch (stepperVariant) {
        case 'high-emphasis-wide': {
            return css `
          font-weight: ${(props) => props.theme.font.weightBold};
          ${getFontSize('size24')};
        `;
        }
        case 'high-emphasis-narrow': {
            return css `
          font-weight: ${(props) => props.theme.font.weightBold};
          ${getFontSize('size20')};
        `;
        }
        case 'input': {
            return css `
          border: 1px solid
            ${!buttonsDisabled && hasError
                ? getColorAlias('contentError')
                : getColorAlias('containerDark')};
          margin: ${getSpacing('s00', 's02')};
          border-radius: ${(props) => props.theme.radius.roundedD};

          &:hover {
            background: ${!buttonsDisabled &&
                getDarkenColor('hover01', 'backgroundDefault')};
          }
        `;
        }
    }
}}
`;
const FocusBorder = styled.div `
  margin: 8px 0;
  border-radius: ${(props) => props.theme.radius.roundedD};
  position: relative;
  &:focus-within {
    box-shadow: 0 0 0 2px ${getColorAlias('focusOuter')};
  }
`;

export { Border, FocusBorder, NumberField, Wrapper };
