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

const TextArea = styled('textarea', { shouldForwardProp })(
  ({ variant = 'onWhite', valid, invalid }: InputProps & { rows?: number }) =>
    sx({
      ...textVariants['1r'],
      resize: 'none',
      position: 'relative',
      lineHeight: 1,
      width: '100%',
      padding: 4,
      border: 0,
      borderRadius: 1,
      willChange: 'padding',
      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),
);

TextArea.defaultProps = {
  rows: 20,
};

export default TextArea;