import React from 'react';
import { TouchableOpacity } from 'react-native';
import { ArrowRight, ArrowLeft } from 'phosphor-react-native';
import { useTheme } from '../../theme/ThemeProvider';
import { Text } from '../Text';
import { Box } from '../Box';
import { Spinner } from '../Spinner';
import { Normalize } from '../../utils/normalize';
import type { theme } from '../../theme/theme';

type SizeButton = 'large' | 'medium' | 'small';
type VariantButton = 'primary' | 'outlined' | 'secondary';

type ArrowButtonProps = React.ComponentProps<typeof Box> & {
  onPress: () => void;
  pos: 'left' | 'right';
  variant?: VariantButton;
  size?: SizeButton;
  label?: string;
  disabled?: boolean;
  loading?: boolean;
};

const sizeButton: { [key in SizeButton]: number } = {
  large: Normalize(48),
  medium: Normalize(40),
  small: Normalize(32),
};

const colorText: { [key in VariantButton]: keyof typeof theme.colors } = {
  primary: 'white',
  outlined: '#666A8F' as keyof typeof theme.colors,
  secondary: 'green',
};

const colorBackground: { [key in VariantButton]: keyof typeof theme.colors } = {
  primary: 'green',
  outlined: 'white',
  secondary: 'honeydev',
};

/**
 * @variant primary, outlined or secondary
 * @pos left or right
 * @size small, medium or large (optional) default small
 * @onPress Called when the button touch is released, but not if cancelled
 * @label right pos label (optional)
 * @disabled right pos disabled (optional)
 */
export const ArrowButton = ({
  onPress,
  size = 'small',
  variant = 'primary',
  pos,
  disabled,
  label,
  loading,
  ...props
}: ArrowButtonProps) => {
  const { fonts, colors } = useTheme();
  const backgroundColor = disabled ? 'gray60' : colorBackground[variant];
  const color = pos === 'left' ? colors.green : colorText[variant];
  const Icon = pos === 'left' ? ArrowLeft : ArrowRight;

  const validateButton = () => {
    if (loading) return true;
    return disabled;
  };
  return (
    <Box {...props}>
      <TouchableOpacity
        onPress={onPress}
        disabled={validateButton()}
        accessibilityLabel={`${pos}ArrowButton`}
        testID={`${pos}ArrowButton`}
      >
        <Box
          flexDirection={'row'}
          justifyContent={'flex-start'}
          alignItems={'center'}
        >
          {label && pos === 'right' && (
            <Text
              color={disabled ? 'gray200' : 'yankeesBlue'}
              fontFamily={fonts.caustenRoundBold}
              fontSize={16}
              mr="spacing-xs"
            >
              {label}
            </Text>
          )}
          <Box
            width={sizeButton[size]}
            height={sizeButton[size]}
            alignItems="center"
            justifyContent="center"
            backgroundColor={
              pos === 'left' ? colorBackground.secondary : backgroundColor
            }
            borderRadius={100}
            borderWidth={variant === 'outlined' ? 1 : 0}
            borderColor={variant === 'outlined' ? 'gray60' : 'transparent'}
          >
            {loading ? (
              <Spinner size={size} />
            ) : (
              <Icon
                weight={size === 'small' ? 'bold' : 'regular'}
                color={color}
                size={Normalize(size === 'small' ? 16 : 24)}
              />
            )}
          </Box>
        </Box>
      </TouchableOpacity>
    </Box>
  );
};