import styled from '../styled';
import sx from '@styled-system/css';
import { compose } from 'styled-system';
import variant from '@styled-system/variant';
import shouldForwardProp from '@styled-system/should-forward-prop';
import { Theme } from '../theme';
import { InputProps } from './';
import { styles as textVariants } from '../text';
import { validStyle, invalidStyle, inputVariant } from './shared';

const adornedVariant = variant({
  prop: 'adorned',
  variants: {
    after: {
      paddingRight: 9,
    },
    before: {
      paddingLeft: 9,
    },
  },
});

const TextInput = styled('input', { shouldForwardProp })(
  ({ valid, invalid }: InputProps) =>
    sx({
      willChange: 'padding',
      ...textVariants['1r'],
      width: '100%',
      position: 'relative',
      padding: 4,
      border: 0,
      borderRadius: 1,
      boxShadow: (theme: Theme) => `inset 0 0 0 1px ${theme.colors.gray[1]}`,
      '&::placeholder': {
        color: 'gray.1',
      },
      transition:
        'box-shadow .1s linear, backgroundColor .1s linear, color .1s linear, padding .2s ease-out',
      '&:not(:placeholder-shown)': {
        '&:invalid': !valid && invalidStyle,
        '&:valid': !invalid && validStyle,
      },
      ...(invalid && invalidStyle),
      ...(valid && validStyle),
      '&:hover': {
        opacity: 0.75,
      },
      '&:active, &:focus': {
        opacity: 0.9,
      },
      '&[disabled]': {
        cursor: 'not-allowed',
        opacity: 0.25,
      },
    }),
  compose(inputVariant, adornedVariant),
);

export default TextInput;