/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import {
  View as PlainView,
  ViewStyle,
  ViewProps,
  FlatList as PlainFlatList,
  ScrollView as PlainScrollView,
  TextInput as PlainTextInputView,
  TextInputProps,
  ScrollViewProps,
  ActivityIndicator as PlainActivityIndicator,
  ActivityIndicatorProps as PlainActivityIndicatorProps,
  Image as PlainImage,
  ImageStyle as PlainImageStyle,
  ImageBackground as PlainImageBackground,
  ImageBackgroundProps as PlainImageBackgroundProps,
  ImageProps as PlainImageProps,
  TouchableWithoutFeedback as PlainTouchableWithoutFeedback,
  TouchableWithoutFeedbackProps as PlainTouchableWithoutFeedbackProps,
  TouchableHighlight as PlainTouchableHighlight,
  TouchableHighlightProps as PlainTouchableHighlightProps,
} from 'react-native';
import { SafeAreaView as PlainSafeAreaView } from 'react-native-safe-area-context';
import styled from '@emotion/native';
import {
  color,
  space,
  layout,
  position,
  border,
  flexbox,
  ThemedBackgroundColorProps,
  ThemedSpaceProps,
  ThemedBorderRadiusProps,
  borderRadius,
  size,
  fontSize,
  ColorProps,
} from 'styled-system';

export type StyleSystemThemedProps = ViewStyle &
  ThemedSpaceProps &
  ThemedBackgroundColorProps &
  ThemedBorderRadiusProps;

export type ActivityIndicatorType = PlainActivityIndicatorProps & StyleSystemThemedProps;
export type ScrollViewType = ScrollViewProps & StyleSystemThemedProps;
export type FlatListType = ScrollViewProps & StyleSystemThemedProps; // TODO: update types

type ViewType = ViewProps & StyleSystemThemedProps;
type TextInputType = TextInputProps & StyleSystemThemedProps & ColorProps;
type ImageType = PlainImageProps & StyleSystemThemedProps;
type ImageBackgroundType = PlainImageBackgroundProps & PlainImageStyle & StyleSystemThemedProps;
type TouchableHighlightType = PlainTouchableHighlightProps & StyleSystemThemedProps;
type TouchableWithoutFeedbackType = PlainTouchableWithoutFeedbackProps & StyleSystemThemedProps;

export const Container = styled(PlainView)<ViewType>(
  color,
  space,
  border,
  size,
  borderRadius,
  layout,
  position,
  flexbox
);

export const Fill = styled(Container)({
  flex: 1,
});

export const Flex = styled(Container)({
  display: 'flex',
});

export const Row = styled(Container)({
  flexDirection: 'row',
});

export const Col = styled(Container)({
  flexDirection: 'column',
});

export const SafeAreaView = styled(PlainSafeAreaView)<ViewType>(
  color,
  space,
  border,
  layout,
  position,
  flexbox
);

export const SafeScreen = styled(SafeAreaView)<ViewType>({
  flex: 1,
});
SafeScreen.defaultProps = {
  backgroundColor: 'base',
  edges: ['top'],
};

export const Screen = styled(Container)<ViewStyle>({
  flex: 1,
});
Screen.defaultProps = {
  backgroundColor: 'base',
};

export const Center = styled(Container)`
  align-items: center;
  justify-content: center;
`;

export const Circle = styled(Container)<CircleProps>`
  width: ${({ cr }) => cr}px;
  height: ${({ cr }) => cr}px;
  border-radius: ${({ cr }) => cr / 2}px;
  align-items: center;
  justify-content: center;
`;

export const ActivityIndicator = styled(PlainActivityIndicator)<ActivityIndicatorType>(
  color,
  space,
  border
);

export const ScrollView = styled(PlainScrollView)<ScrollViewType>(color, space, border);

export const FlatList = styled(PlainFlatList)<ScrollViewType>(color, space, border);
ScrollView.defaultProps = {
  contentContainerStyle: {
    paddingBottom: 50,
  },
};
export const TextInput = styled(PlainTextInputView)<TextInputType>(
  color,
  space,
  border,
  layout,
  position,
  flexbox,
  fontSize
);

export const Image = styled(PlainImage)<ImageType>(
  flexbox,
  space,
  border,
  position,
  layout,
  flexbox
);

export const ImageBackground = styled(PlainImageBackground)<ImageBackgroundType>(
  flexbox,
  space,
  border,
  position,
  layout,
  flexbox
);

export const TouchableHighlight = styled(PlainTouchableHighlight)<TouchableHighlightType>(
  flexbox,
  space,
  border,
  color,
  position,
  layout,
  flexbox
);

export const TouchableWithoutFeedback = styled(
  PlainTouchableWithoutFeedback
)<TouchableWithoutFeedbackType>(flexbox, space, border, position, layout, flexbox);

interface CircleProps {
  cr: number;
}