import { FC } from 'react';
import { Container, Row, StyleSystemThemedProps, TextInput } from 'components/layout';
import { GestureResponderEvent, Platform, TextInputProps } from 'react-native';
import styled from '@emotion/native';
import { variant } from 'styled-system';
import { ColorName, TextStyle, ViewStyle } from '@emotion/react';
import { Visible } from 'components/visible';
import { Fab } from 'components/fab';
import { useTheme } from 'hooks/theme';
import { COLOR_VALUES } from 'theme/color';
import { Card } from 'components/card';
import { Text } from 'components/text/Text';
import { Avatar } from 'components/avatar';
import { TouchableTile } from 'components/touchable-tile';

const variants: Record<TextFieldVariants, ViewStyle> = {
  outline: {
    borderWidth: 1,
  },
  plain: {
    borderWidth: 0,
  },
  float: {
    borderWidth: 1,
  },
};

const shapeVariants: Record<TextFieldShapeVariants, ViewStyle> = {
  round: {
    borderRadius: 5,
  },
  square: {
    borderRadius: 0,
  },
};

const colorVariants: Record<TextFieldColorVariants, ViewStyle> = {
  primary: {
    borderColor: 'primary',
  },
  secondary: {
    borderColor: 'secondary',
  },
  base: {
    borderColor: 'base',
  },
  'base-01': {
    borderColor: 'base-01',
  },
  'base-02': {
    borderColor: 'base-02',
  },
  body: {
    borderColor: 'body',
  },
  transparent: {
    borderColor: 'transparent',
  },
};

const backgroundVariants: Record<TextFieldColorVariants, ViewStyle> = {
  primary: {
    backgroundColor: 'primary',
  },
  secondary: {
    backgroundColor: 'secondary',
  },
  base: {
    backgroundColor: 'base',
  },
  'base-01': {
    backgroundColor: 'base-01',
  },
  'base-02': {
    backgroundColor: 'base-02',
  },
  body: {
    backgroundColor: 'body',
  },
  transparent: {
    backgroundColor: 'transparent',
  },
};

export const sizeVariants: Record<TextFieldSizeVariants, TextStyle> = {
  'extra-small': {
    height: 25,
    fontSize: 14,
  },
  small: {
    height: 32,
    fontSize: 14,
  },

  medium: {
    px: 'xs',
    height: 35,
    fontSize: 14,
  },
  large: {
    px: 's',
    height: 40,
    fontSize: 15,
  },
  'extra-large': {
    px: 'm',
    height: 45,
  },
  content: {
    px: 'xs',
    height: undefined,
  },
};

const TextFieldLocal = styled(TextInput)<TextFieldType>(
  variant({
    prop: 'sizeVariant',
    variants: sizeVariants,
  })
);

const TextFieldWrapper = styled(Container)<TextFieldWrapperType>(
  variant({
    variants,
  }),
  variant({
    prop: 'colorVariant',
    variants: colorVariants,
  }),
  variant({
    prop: 'shapeVariant',
    variants: shapeVariants,
  }),
  variant({
    prop: 'backgroundVariant',
    variants: backgroundVariants,
  })
);

const localFieldStyle = Platform.select({
  web: {
    outline: 'none',
  },
});

export const TextField: FC<TextFieldType> = ({
  leftElement,
  leftOnPress,
  rightOnPress,
  sizeVariant,
  isAutoComplete,
  colorVariant = 'body',
  shapeVariant,
  rightElement,
  refs,
  labelColorVariant = 'caption',
  captionColorVariant = 'secondary',
  caption,
  label,
  ...props
}) => {
  const { activeThemeMode } = useTheme();

  const textColor =
    activeThemeMode === 'dark' ? COLOR_VALUES.dark['grey-08'] : COLOR_VALUES.light['grey-08'];
  const placeholderColor = COLOR_VALUES.light['grey-04'];
  const pl = leftElement ? undefined : 'xs';
  const pr = rightElement ? undefined : 'xs';
  return (
    <>
      <Visible if={!!label}>
        <Container mb="2xs">
          <Text variant="caption" color={labelColorVariant}>
            {label}
          </Text>
        </Container>
      </Visible>
      <TextFieldWrapper
        zIndex={1}
        flexDirection="row"
        alignItems="center"
        colorVariant={colorVariant}
        shapeVariant={shapeVariant}
        sizeVariant={sizeVariant}
        {...props}
      >
        {/* TODO: directly render leftElement and leftElement child */}
        <Visible if={!!leftElement}>
          <Container>
            <Fab
              colorVariant="transparent"
              hoverColorVariant="base"
              sizeVariant="medium"
              shapeVariant="round"
              onPress={leftOnPress}
              variant="plain"
              centerElement={leftElement}
            />
          </Container>
        </Visible>
        <TextFieldLocal
          color={textColor}
          placeholderTextColor={placeholderColor}
          pl={pl}
          pr={pr}
          flex={1}
          autoCapitalize={'none'}
          style={localFieldStyle as TextStyle}
          sizeVariant={sizeVariant}
          ref={refs}
          {...props}
        />
        <Visible if={!!rightElement}>
          <Container>
            <Fab
              colorVariant="transparent"
              sizeVariant="large"
              shapeVariant="round"
              onPress={rightOnPress}
              variant="plain"
              centerElement={rightElement}
            />
          </Container>
        </Visible>
        <Visible if={isAutoComplete}>
          <Card
            zIndex={5}
            shapeVariant="round"
            position="absolute"
            colorVariant="base"
            left={0}
            right={0}
            top={40}
            overflow="hidden"
            variant="outline"
          >
            <TouchableTile
              variant="text"
              shapeVariant="square"
              sizeVariant="medium"
              onPress={() => {}}
              leftElement={
                <Row>
                  <Avatar title="Sufi" shapeVariant="square" colorVariant="base-01" />
                  <Text ml="xs" variant="body" color="white">
                    sufi@gmail.com
                  </Text>
                </Row>
              }
            />
          </Card>
        </Visible>
      </TextFieldWrapper>

      <Visible if={!!caption}>
        <Container mt="3xs">
          <Text variant="caption" color={captionColorVariant}>
            {caption}
          </Text>
        </Container>
      </Visible>
    </>
  );
};

export type TextFieldVariants = 'plain' | 'outline' | 'float';
export type TextFieldShapeVariants = 'round' | 'square';
export type TextFieldSizeVariants =
  | 'extra-small'
  | 'small'
  | 'medium'
  | 'large'
  | 'extra-large'
  | 'content';
export type TextFieldColorVariants =
  | 'primary'
  | 'secondary'
  | 'base'
  | 'base-01'
  | 'base-02'
  | 'body'
  | 'transparent';

export type TextFieldWrapperType = StyleSystemThemedProps & TextFieldProps;
export type TextFieldType = StyleSystemThemedProps & TextFieldProps & TextInputProps;
export interface TextFieldProps {
  isAutoComplete?: boolean;
  leftElement?: JSX.Element;
  rightElement?: JSX.Element;
  shapeVariant?: TextFieldShapeVariants;
  colorVariant?: TextFieldColorVariants;
  backgroundVariant?: TextFieldColorVariants;
  variant: TextFieldVariants;
  leftOnPress?: ((event: GestureResponderEvent) => void) | undefined;
  rightOnPress?: ((event: GestureResponderEvent) => void) | undefined;
  refs?: any;
  caption?: string;
  label?: string;
  labelColorVariant?: ColorName;
  captionColorVariant?: ColorName;
  sizeVariant: TextFieldSizeVariants;
}