import styled from 'styled-components/native';
import {
  flexbox,
  FlexboxProps,
  layout,
  LayoutProps,
  position,
  PositionProps,
  space,
  SpaceProps,
  opacity,
  OpacityProps,
} from 'styled-system';
import { Platform } from 'react-native';

import { BaseTheme } from '../../../theme/base';
import {
  customBackground,
  CustomBackgroundProps,
} from '../../../theme/customProps/customBackground';
import {
  customLayout,
  CustomLayoutProps,
} from '../../../theme/customProps/customLayout';
import {
  customBorder,
  CustomBorderProps,
} from '../../../theme/customProps/customBorder';
import { webOnly, WebOnlyProps } from '../../../theme/customProps/webOnly';

export type StyledViewProps = SpaceProps<BaseTheme> &
  LayoutProps<BaseTheme> &
  FlexboxProps<BaseTheme> &
  PositionProps<BaseTheme> &
  OpacityProps<BaseTheme> &
  CustomBackgroundProps &
  CustomLayoutProps &
  CustomBorderProps &
  WebOnlyProps;

export const StyledView = styled.View<StyledViewProps>`
  ${space}
  ${layout}
  ${flexbox}
  ${position}
  ${opacity}
  ${customBorder}
  ${customLayout}
  ${customBackground}
  ${Platform.OS === 'web' ? webOnly : undefined}
`;