import React from 'react';
import styled from '@emotion/native';
import { ColorName, ViewStyle } from '@emotion/react';
import { StyleSystemThemedProps, TouchableHighlight } from 'components/layout';
import { TouchableHighlightProps as TouchableHighlightPropsBase } from 'react-native';
import { variant } from 'styled-system';
import { COLOR_VALUES } from 'theme/color';
import { Visible } from 'components/visible';
import { Text } from 'components/text';
import { Check } from 'icons';

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

const colorVariants: Record<CheckboxColorVariant, ViewStyle> = {
  primary: { borderWidth: 1, borderColor: 'primary' },
  success: { borderWidth: 1, borderColor: 'success' },
  secondary: { borderWidth: 1, borderColor: 'secondary' },
  transparent: { borderWidth: 1, borderColor: 'transparent' },
  base: { borderWidth: 1, borderColor: 'base' },
  'base-01': { borderWidth: 1, borderColor: 'base-01' },
  'base-02': { borderWidth: 1, borderColor: 'base-02' },
};

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

const sizeVariants: Record<CheckboxSizeVariant, ViewStyle> = {
  '2-extra-small': {
    height: 15,
    width: 15,
  },
  'extra-small': {
    height: 20,
    width: 20,
  },
  small: {
    height: 25,
    width: 25,
  },
  medium: {
    width: 30,
    height: 30,
  },
  large: {
    width: 35,
    height: 35,
  },
  'extra-large': {
    width: 40,
    height: 40,
  },
};

const CheckboxLocal = styled(TouchableHighlight)<CheckboxLocalProps>(
  variant({
    prop: 'sizeVariant',
    variants: sizeVariants,
  }),
  variant({
    prop: 'colorVariant',
    variants: colorVariants,
  }),
  variant({
    prop: 'backgroundVariant',
    variants: backgroundVariants,
  }),
  variant({
    prop: 'shapeVariant',
    variants: shapeVariants,
  }),
  {
    alignItems: 'center',
    justifyContent: 'center',
  }
);

const UnderlayColors: Record<CheckboxColorVariant, string> = {
  primary: COLOR_VALUES['underlay-primary'],
  success: COLOR_VALUES['underlay-success'],
  secondary: COLOR_VALUES['underlay-primary'],
  transparent: 'transparent',
  base: COLOR_VALUES.white,
  'base-01': 'transparent',
  'base-02': COLOR_VALUES['underlay-primary'],
};

export const Checkbox: React.FC<CheckboxType> = ({
  leftTitle,
  titleColor,
  isActive,
  rightTitle,
  colorVariant,
  onPress,
  shapeVariant = 'round',
  sizeVariant = 'extra-small',
  ...props
}) => {
  const background = isActive ? colorVariant : undefined;
  return (
    <TouchableHighlight alignItems="center" flexDirection="row" {...props}>
      <>
        <Visible if={!!leftTitle}>
          <Text variant="body" mr="xs" color={titleColor}>
            {leftTitle}
          </Text>
        </Visible>
        <CheckboxLocal
          onPress={onPress}
          shapeVariant={shapeVariant}
          underlayColor={UnderlayColors[colorVariant as CheckboxColorVariant]}
          sizeVariant={sizeVariant}
          backgroundVariant={background}
          colorVariant={colorVariant}
        >
          <Visible if={isActive}>
            <Check colorVariant="title" />
          </Visible>
        </CheckboxLocal>
        <Visible if={!!rightTitle}>
          <Text variant="body" ml="xs" color={titleColor}>
            {rightTitle}
          </Text>
        </Visible>
      </>
    </TouchableHighlight>
  );
};

export type CheckboxVariant =
  | 'primary'
  | 'outline'
  | 'outline-primary'
  | 'text'
  | 'tab'
  | 'tab-active';

export type CheckboxColorVariant =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'base'
  | 'base-01'
  | 'base-02'
  | 'transparent';
export type CheckboxSizeVariant =
  | '2-extra-small'
  | 'extra-small'
  | 'small'
  | 'medium'
  | 'large'
  | 'extra-large';

export type CheckboxShapeVariant = 'square' | 'round' | 'circle';

type CheckboxType = StyleSystemThemedProps & CheckboxLocalProps & CheckboxProps;
export interface CheckboxLocalProps extends TouchableHighlightPropsBase {
  sizeVariant?: CheckboxSizeVariant;
  backgroundVariant?: CheckboxColorVariant;
  colorVariant?: CheckboxColorVariant;
  shapeVariant?: CheckboxShapeVariant;
}
export interface CheckboxProps {
  isActive: boolean;
  titleColor?: ColorName;
  leftTitle?: string;
  rightTitle?: string;
}