import styled from '@emotion/native';
import { TouchableOpacity } from 'react-native';
import Icon from '../Icon';

type StyledChipWrapperProps = {
  themeVariant?: 'selection' | 'filter' | 'compact' | 'compact-outlined';
  themeSelected?: boolean;
};

const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
  ({ themeVariant, themeSelected, theme }) => {
    const getShadowStyles = () => {
      switch (themeVariant) {
        case 'compact':
        case 'filter':
          return {
            ...theme.__hd__.chip.shadows.filledWrapper,
          };
        case 'selection':
        case 'compact-outlined':
          return undefined;
      }
    };

    const getBorderStyles = () => {
      switch (themeVariant) {
        case 'selection':
        case 'compact-outlined': {
          return {
            borderColor: themeSelected
              ? theme.__hd__.chip.colors.outlinedSelectedBorder
              : theme.__hd__.chip.colors.outlinedDefaultBorder,
            borderWidth: theme.__hd__.chip.borderWidths.outlinedDefaultBorder,
          };
        }
        case 'compact':
        case 'filter': {
          return {
            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
          };
        }
      }
    };

    const getBackgroundStyles = () => {
      if (themeSelected) {
        switch (themeVariant) {
          case 'selection':
          case 'compact-outlined': {
            return {
              backgroundColor: themeSelected
                ? theme.__hd__.chip.colors.outlinedSelectedBackground
                : theme.__hd__.chip.colors.outlinedDefaultBackground,
            };
          }
          case 'filter':
          case 'compact': {
            return {
              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
            };
          }
        }
      } else {
        switch (themeVariant) {
          case 'selection':
          case 'compact-outlined': {
            return {
              backgroundColor:
                theme.__hd__.chip.colors.outlinedDefaultBackground,
            };
          }
          case 'filter':
          case 'compact': {
            return {
              backgroundColor: theme.__hd__.chip.colors.filledBackground,
            };
          }
        }
      }
    };

    const getPaddingStyles = () => {
      switch (themeVariant) {
        case 'compact':
        case 'compact-outlined': {
          return {
            paddingHorizontal:
              theme.__hd__.chip.space.compactWrapperHorizontalPadding,
            paddingVertical:
              theme.__hd__.chip.space.compactWrapperVerticalPadding,
          };
        }
        default: {
          return {
            paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
            paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
          };
        }
      }
    };

    return {
      alignSelf: 'flex-start',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: theme.__hd__.chip.radii.wrapper,
      ...getShadowStyles(),
      ...getBorderStyles(),
      ...getPaddingStyles(),
      ...getBackgroundStyles(),
    };
  }
);

const StyledChipIcon = styled(Icon)(({ theme }) => ({
  fontSize: theme.__hd__.chip.fontSizes.icon,
}));

export { StyledChipWrapper, StyledChipIcon };