import variant from '@styled-system/variant';
import { styles as textVariants } from '../text';
import { Theme } from '../theme';

export const validStyle = {
  boxShadow: (theme: Theme) => `inset 0 0 0 1px ${theme.colors.success[0]}`,
};

export const invalidStyle = {
  boxShadow: (theme: Theme) => `inset 0 0 0 1px ${theme.colors.error[0]}`,
};

export const inputStyle = ({ valid, invalid }) => ({
  ...textVariants['1r'],
  width: '100%',
  position: 'relative',
  lineHeight: 1,
  padding: 4,
  border: 0,
  borderRadius: 1,
  boxShadow: (theme: Theme) =>
    `inset 0 0 0 1px ${theme.colors.TEDRed[0]} !important`,
  '&::placeholder': {
    color: 'gray.1',
  },
  '&:not(:placeholder-shown)': {
    '&:invalid': !valid && invalidStyle,
    '&:valid': !invalid && validStyle,
  },
  ...(invalid && invalidStyle),
  ...(valid && validStyle),
  '&:hover': {
    opacity: 0.75,
  },
  '&:active': {
    opacity: 0.9,
  },
  '&:[disabled]': {
    cursor: 'not-allowed',
    opacity: 0.25,
  },
});

export const inputVariant = variant({
  variants: {
    onWhite: {
      color: 'gray.0',
      backgroundColor: 'gray.3',
    },
    onGray: {
      color: 'gray.0',
      backgroundColor: 'white',
    },
    onBlack: {
      color: 'white',
      backgroundColor: 'transparent',
    },
  },
});