import { extend, mergeData } from '../../vue';
import { NAME_SKELETON_IMG } from '../../constants/components';
import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
import { makePropsConfigurable, makeProp } from '../../utils/props';
import { BAspect } from '../aspect';
import { BSkeleton } from './skeleton';

// --- Props ---

const props = makePropsConfigurable({
  animation: makeProp(PROP_TYPE_STRING),
  aspect: makeProp(PROP_TYPE_STRING, '16:9'),
  cardImg: makeProp(PROP_TYPE_STRING),
  height: makeProp(PROP_TYPE_STRING),
  noAspect: makeProp(PROP_TYPE_BOOLEAN, false),
  variant: makeProp(PROP_TYPE_STRING),
  width: makeProp(PROP_TYPE_STRING)
}, NAME_SKELETON_IMG);

// --- Main component ---

// @vue/component
const BSkeletonImg = /*#__PURE__*/extend({
  name: NAME_SKELETON_IMG,
  functional: true,
  props,
  render(h, _ref) {
    let {
      data,
      props
    } = _ref;
    const {
      aspect,
      width,
      height,
      animation,
      variant,
      cardImg
    } = props;
    const $img = h(BSkeleton, mergeData(data, {
      props: {
        type: 'img',
        width,
        height,
        animation,
        variant
      },
      class: {
        [`card-img-${cardImg}`]: cardImg
      }
    }));
    return props.noAspect ? $img : h(BAspect, {
      props: {
        aspect
      }
    }, [$img]);
  }
});

export { BSkeletonImg, props };
