import React from 'react';
import {ImageStyle, StyleProp, View} from 'react-native';
import {Gradient} from '@components';
import {Image} from '@components/_core/Image';
import ServiceManagementCategoryIconComponent from '@modules/serviceManagement/components/ServiceManagementCategoryIconComponent';
import {ServiceManagementCatalogItem} from '@modules/serviceManagement/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const LINEAR_GRADIENT_PROPS = {start: {x: 0, y: 0}, end: {x: 1, y: 0}};

function ServiceManagementCatalogItemCover({
  catalogItem,
  style,
}: {
  catalogItem: ServiceManagementCatalogItem;
  style?: StyleProp<ImageStyle>;
}) {
  const {theme} = useTheme();
  const containerStyles = [
    styles.cover,
    {backgroundColor: theme.border.neutral.default},
    style,
  ];
  const CategoryIcon = catalogItem.category
    ? ServiceManagementCategoryIconComponent({
        category: catalogItem.category.icon,
      })
    : null;

  return catalogItem.coverPictureEnabled ? (
    catalogItem.coverPicture ? (
      <Image
        style={containerStyles}
        contentFit="fill"
        source={{uri: catalogItem.coverPicture.url}}
      />
    ) : (
      <Gradient
        pointerEvents="none"
        colors={[
          theme.border.neutral.brand,
          theme.button.background.primary.default,
        ]}
        start={LINEAR_GRADIENT_PROPS.start}
        end={LINEAR_GRADIENT_PROPS.end}
        style={containerStyles}
      />
    )
  ) : (
    <View style={containerStyles}>
      {CategoryIcon && <CategoryIcon color={theme.text.neutral.disabled} />}
    </View>
  );
}

export default ServiceManagementCatalogItemCover;