import {useMemo} from 'react';
import {IconBan} from '@tabler/icons-react-native';

import {Asset, MediaEntity} from '../interfaces';
import {getAssetsLabel} from '../utils/files';

export const usePrefixIconAndText = ({
  assets,
  pendingAssets,
  isDeleted,
}: {
  assets?: Nullable<Asset[]>;
  pendingAssets?: Nullable<MediaEntity[]>;
  isDeleted?: boolean;
}) => {
  return useMemo(() => {
    if (isDeleted) {
      return {
        PrefixIcon: IconBan,
        defaultText: '',
      };
    }

    const hasAssets = !!assets?.length;
    const targetAssets: {format: string; filename: string}[] | null = hasAssets
      ? assets.map(asset => ({
          format: asset.metadata.format,
          filename: asset.filename,
        }))
      : pendingAssets?.map(asset => ({
          format: asset.type.toLowerCase(),
          filename: asset.name,
        })) ?? null;

    if (!targetAssets?.length) {
      return {
        PrefixIcon: null,
        defaultText: '',
      };
    }

    const {Icon, label} = getAssetsLabel(targetAssets);
    return {
      PrefixIcon: Icon,
      defaultText: label,
    };
  }, [isDeleted, assets, pendingAssets]);
};
