import React, { useCallback } from 'react';
import { Text } from '../Text';
import { Image, StyleSheet } from 'react-native';
import { Normalize } from '../../utils/normalize';
import { theme, colors, spacing } from '../../theme/theme';
import * as Icons from 'phosphor-react-native';
import { TouchableComponent } from '../TouchableComponent';
import { Box } from '../Box';

const { IconContext } = Icons;

type PhosphorIcons = keyof typeof Icons;
interface Props {
  LeftIcon?: PhosphorIcons;
  label: string;
  RightIcon?: PhosphorIcons;
  selected?: boolean;
  disabled?: boolean;
  type?: 'icon' | 'avatar';
  avatarSrc?: string;
  onIconLeftPress?: () => void;
  onIconRightPress?: () => void;
  onPress?: () => void;
}

const useStatusStyle = ({
  disabled,
  selected,
}: {
  disabled: boolean;
  selected: boolean;
}) => {
  if (disabled) {
    return {
      container: styles.disabledContainer,
      label: styles.disabledLabel,
    };
  }
  if (selected) {
    return {
      container: styles.selectedContainer,
      label: styles.selectedLabel,
    };
  }
  return {
    container: styles.defaultContainer,
    label: styles.defaultLabel,
  };
};

const Icon = ({
  name,
  disabled,
  ...rest
}: Icons.IconProps & { name: PhosphorIcons; disabled: boolean }) => {
  const PhosphorIcon = Icons[name] as React.FC<Icons.IconProps>;
  return (
    <IconContext.Provider
      value={{
        size: Normalize(16),
        color: disabled ? colors.gray60 : colors.darkBlueGray,
      }}
    >
      <PhosphorIcon {...rest} />
    </IconContext.Provider>
  );
};

/**
 * @LeftIcon Icon rendered on the left
 * @label Chip title
 * @RightIcon Icon rendered on the right
 * @selected current selected status
 * @disabled current disabled status
 * @type chip variant style type
 **/

export const Chip = ({
  LeftIcon,
  label,
  RightIcon,
  selected,
  disabled,
  type,
  avatarSrc,
  onIconLeftPress,
  onIconRightPress,
  onPress,
}: Props) => {
  const statusStyles = useStatusStyle({
    disabled: !!disabled,
    selected: !!selected,
  });

  const renderLeftContent = useCallback(() => {
    if (type === 'avatar') {
      if (selected)
        return (
          <Icons.CheckCircle
            size={Normalize(24)}
            weight="fill"
            style={styles.avatarPlaceholder}
            color={statusStyles.label.color}
          />
        );
      if (avatarSrc) {
        return (
          <Image
            style={styles.avatarImage}
            source={{ uri: avatarSrc }}
            testID="avatarImage"
          />
        );
      } else {
        return (
          <Box testID="avatarIcon">
            <Icons.UserCircle
              size={Normalize(24)}
              weight="fill"
              style={styles.avatarPlaceholder}
              color={statusStyles.label.color}
            />
          </Box>
        );
      }
    } else {
      if (LeftIcon) {
        return (
          <TouchableComponent
            onPress={() => onIconLeftPress && onIconLeftPress()}
            activeOpacity={1}
            testID="leftIcon"
          >
            <Icon name={LeftIcon} disabled={!!disabled} />
          </TouchableComponent>
        );
      } else return <></>;
    }
  }, [
    LeftIcon,
    avatarSrc,
    disabled,
    onIconLeftPress,
    selected,
    statusStyles.label.color,
    type,
  ]);

  const renderRightContent = useCallback(() => {
    if (RightIcon) {
      return (
        <TouchableComponent
          onPress={() => onIconRightPress && onIconRightPress()}
          activeOpacity={1}
          testID="rightIcon"
        >
          <Icon name={RightIcon} disabled={!!disabled} />
        </TouchableComponent>
      );
    }
    return <></>;
  }, [RightIcon, disabled, onIconRightPress]);

  return (
    <TouchableComponent
      style={[styles.container, statusStyles.container]}
      borderRadius={type === 'avatar' ? Normalize(100) : spacing['spacing-xxs']}
      onPress={() => onPress && onPress()}
      testID={type === 'avatar' ? 'avatarChip' : 'chip'}
    >
      {renderLeftContent()}
      <Text style={[styles.label, statusStyles.label]} testID="chipLabel">
        {label}
      </Text>
      {renderRightContent()}
    </TouchableComponent>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: spacing['spacing-xs'],
    paddingVertical: Normalize(6),
    justifyContent: 'center',
    borderWidth: spacing['spacing-xxxxs'],
    alignSelf: 'flex-start',
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    fontFamily: theme.textVariants.mediumBody.fontFamily,
    fontSize: theme.textVariants.mediumBody.fontSize,
    lineHeight: theme.textVariants.mediumBody.lineHeight,
    paddingHorizontal: spacing['spacing-xs'],
  },
  defaultContainer: {
    borderColor: colors.gray60,
  },
  defaultLabel: {
    color: colors.darkBlueGray,
  },
  selectedContainer: {
    backgroundColor: colors.blue10,
    borderColor: 'transparent',
  },
  selectedLabel: {
    color: colors.darkBlueGray,
  },
  disabledContainer: {
    borderColor: colors.gray60,
  },
  disabledLabel: {
    color: colors.gray60,
  },
  avatarPlaceholder: { margin: -spacing['spacing-xxs'], marginRight: 0 },
  avatarImage: {
    height: 24,
    width: 24,
    borderRadius: 12,
    margin: -spacing['spacing-xxxs'],
    marginRight: 0,
  },
});