import * as React from 'react';
import { Pseudos } from 'csstype';
import styled from '../styled';
import { ResponsiveValue } from 'styled-system';
import css from '@styled-system/css';
import {
  SpaceProps,
  LayoutProps,
  BorderProps,
  ShadowProps,
  ColorProps,
  FlexboxProps,
  GridProps,
  BackgroundProps,
  OpacityProps,
  OverflowProps,
  PositionProps,
} from 'styled-system';

type AnimationProps = {
  animation?: string;
  animationDelay?: string;
  animationDirection?: string;
  animationDuration?: string;
  animationFillMode?: string;
  animationIterationCount?: string;
  animationName?: string;
  animationPlayState?: string;
  animationTimingFunction?: string;
};

type BaseViewProps = SpaceProps &
  LayoutProps &
  BorderProps &
  ShadowProps &
  ColorProps &
  FlexboxProps &
  GridProps &
  OpacityProps &
  OverflowProps &
  BackgroundProps &
  PositionProps &
  AnimationProps & {
    userSelect?: string;
  };

export type ViewProps = Partial<
  Omit<React.AllHTMLAttributes<HTMLElement>, 'as'>
> & {
  as?: any;
  sx?: BaseViewProps & Partial<Record<Pseudos, BaseViewProps>>;
};

const View = styled('div')<ViewProps>(
  {
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  ({ sx }) => {
    return sx ? css(sx) : null;
  },
);

View.displayName = 'Monterey(View)';

export default View;