import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
import React from 'react';
import type { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
import { View } from 'react-native';

import { useTheme } from '../../../theme';
import StyledHeroIcon from '../HeroIcon';
import type { IconName } from '..';

type GradientIconSize =
  | 'xxxsmall'
  | 'xsmall'
  | 'small'
  | 'medium'
  | 'large'
  | 'xlarge';

interface GradientIconProps extends AccessibilityProps {
  name: IconName;
  themeSize: GradientIconSize;
  testID?: string;
  style?: StyleProp<ViewStyle>;
}

const GradientIcon = ({
  name,
  themeSize,
  testID,
  style,
  ...accessibilityProps
}: GradientIconProps) => {
  const theme = useTheme();
  const gradient = theme.colors.gradients.aiDiagonal;
  const size = theme.__hd__.icon.sizes[themeSize];

  return (
    <MaskedView
      testID={testID}
      style={[{ width: size, height: size }, style]}
      {...accessibilityProps}
      maskElement={
        <View
          style={{
            backgroundColor: 'transparent',
            width: size,
            height: size,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <StyledHeroIcon
            name={name}
            themeIntent="text"
            themeSize={themeSize}
          />
        </View>
      }
    >
      <LinearGradient
        start={gradient.start}
        end={gradient.end}
        colors={gradient.colors}
        locations={gradient.locations}
        style={{ width: size, height: size }}
      />
    </MaskedView>
  );
};

export default GradientIcon;