import React from 'react';
import styled from '@emotion/native';
import { TouchableHighlightProps as TouchableHighlightPropsBase } from 'react-native';

import { variant } from 'styled-system';
import { ColorName, ViewStyle } from '@emotion/react';
import { Text } from 'components/text';
import { Row, StyleSystemThemedProps, TouchableHighlight } from 'components/layout';
import { Visible } from 'components/visible';

const variants: Record<ChipVariant, ViewStyle> = {
  outline: {
    borderRadius: 'chip',
    borderWidth: 1,
    borderColor: 'caption-01',
  },
  plain: {
    borderRadius: 'chip',
  },
};
const colorVariants: Record<ChipColorVariant, ViewStyle> = {
  transparent: {
    backgroundColor: 'transparent',
  },
  base: {
    backgroundColor: 'base',
  },
  'base-01': {
    backgroundColor: 'base-01',
  },
  'base-02': {
    backgroundColor: 'base-02',
  },
  secondary: {
    backgroundColor: 'secondary',
  },
  'secondary-01': {
    backgroundColor: 'secondary-01',
  },
  success: {
    backgroundColor: 'success',
  },
  'success-01': {
    backgroundColor: 'success-01',
  },
};

const sizeVariants: Record<ChipSizeVariant, ViewStyle> = {
  'extra-small': {
    py: '3xs',
    px: '2xs',
  },
  small: {
    py: '3xs',
    px: 'xs',
  },
  medium: {
    py: '2xs',
    px: 's',
  },
  large: {
    py: 'xs',
    px: 'm',
  },
};

export const ChipLocal = styled(TouchableHighlight)<TouchableHighlightProps>(
  variant({
    variants,
  }),
  variant({
    prop: 'sizeVariant',
    variants: sizeVariants,
  }),
  variant({
    prop: 'colorVariant',
    variants: colorVariants,
  }),
  {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  }
);

export const Chip: React.FC<ChipType> = ({
  title,
  titleColor = 'caption',
  centerElement,
  leftElement,
  rightElement,
  ...props
}) => {
  return (
    <ChipLocal {...props}>
      <>
        <Visible if={!!leftElement}>
          <Row mr="xs">{leftElement}</Row>
        </Visible>
        <Visible if={!!title}>
          <Text variant="caption" color={titleColor}>
            {title}
          </Text>
        </Visible>
        <Visible if={!!centerElement}>
          <>{centerElement}</>
        </Visible>
        <Visible if={!!rightElement}>
          <Row ml="xs">{rightElement}</Row>
        </Visible>
      </>
    </ChipLocal>
  );
};

type ChipType = StyleSystemThemedProps & TouchableHighlightProps & ChipProps;

export type ChipVariant = 'outline' | 'plain';
export type ChipSizeVariant = 'extra-small' | 'small' | 'medium' | 'large';
export type ChipColorVariant =
  | 'transparent'
  | 'base'
  | 'base-01'
  | 'base-02'
  | 'success'
  | 'success-01'
  | 'secondary'
  | 'secondary-01';
export interface TouchableHighlightProps extends TouchableHighlightPropsBase {
  variant: ChipVariant;
  sizeVariant?: ChipSizeVariant;
  colorVariant: ChipColorVariant;
}

export interface ChipProps {
  title?: string | number;
  titleColor?: ColorName;
  centerElement?: JSX.Element;
  leftElement?: JSX.Element;
  rightElement?: JSX.Element;
  icon?: JSX.Element;
}