"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic");

const state_1 = require("@skava/state");

const Empty_1 = tslib_1.__importDefault(require("../../atoms/Empty"));

const deps_1 = require("./deps");

const styled_1 = require("./styled");

function addProtocolsWithURL(url) {
  if (url && url.length > 0) {
    const noProtocolURL = url.replace(/(^\w+:|^)\/\//, '');
    const updatedURL = '//' + noProtocolURL;
    return updatedURL;
  }

  return url;
}

function defaultRenderDeviceSpecific(item) {
  const {
    desktop,
    tablet,
    mobile
  } = item;
  return state_1.application.isDesktop ? desktop : state_1.application.isTablet ? tablet : mobile;
}

exports.defaultRenderDeviceSpecific = defaultRenderDeviceSpecific;

function defaultRenderArrow(item) {
  const {
    arrow,
    arrowIconColor,
    arrowIconSize
  } = item;
  const attributes = {
    arrowIconColor,
    arrowIconSize,
    type: arrow === 'prev' ? 'left' : 'right'
  };
  return react_1.default.createElement(styled_1.StyledMaterialIcon, Object.assign({}, attributes));
}

function defaultRenderComponent(item) {
  const {
    src
  } = item;
  return react_1.default.createElement(styled_1.StyledImage, {
    src: addProtocolsWithURL(src),
    alt: addProtocolsWithURL(src)
  });
}

exports.defaultRenderComponent = defaultRenderComponent;

function defaultRenderForwardArrow(props) {
  const {
    order,
    onClick: handleClick,
    isAbsolute,
    align,
    hasNavigations,
    isDisabled,
    arrowIconColor,
    arrowIconSize
  } = props;
  const stepperView = hasNavigations ? react_1.default.createElement(styled_1.ForwardArrow, {
    isAbsolute: isAbsolute,
    align: align,
    order: order,
    onClick: handleClick,
    isDisabled: isDisabled
  }, react_1.default.createElement(styled_1.StyledMaterialIcon, {
    arrowIconColor: arrowIconColor,
    arrowIconSize: arrowIconSize,
    type: 'right'
  })) : react_1.default.createElement(Empty_1.default, null);
  return stepperView;
}

function defaultRenderBackwardArrow(props) {
  const {
    order,
    onClick: handleClick,
    isAbsolute,
    align,
    hasNavigations,
    isDisabled,
    arrowIconColor,
    arrowIconSize
  } = props;
  const stepperView = hasNavigations ? react_1.default.createElement(styled_1.BackwardArrow, {
    isAbsolute: isAbsolute,
    align: align,
    order: order,
    onClick: handleClick,
    isDisabled: isDisabled
  }, react_1.default.createElement(styled_1.StyledMaterialIcon, {
    arrowIconColor: arrowIconColor,
    arrowIconSize: arrowIconSize,
    type: 'left'
  })) : react_1.default.createElement(Empty_1.default, null);
  return stepperView;
}

function defaultRenderStepper(props) {
  const {
    order,
    onClick: handleClick,
    arrow,
    arrowIconColor,
    arrowIconSize,
    isAbsolute,
    align,
    hasNavigations,
    isDisabled
  } = props;
  const stepperView = hasNavigations ? react_1.default.createElement(styled_1.Stepper, {
    isAbsolute: isAbsolute,
    align: align,
    order: order,
    onClick: handleClick,
    arrow: arrow,
    isDisabled: isDisabled
  }, defaultRenderArrow({
    arrow,
    arrowIconColor,
    arrowIconSize
  })) : react_1.default.createElement(Empty_1.default, null);
  return stepperView;
}

const renderThumbnail = props => {
  const {
    type,
    deviceSpecific,
    value,
    index,
    renderComponent,
    state,
    gridGap
  } = props;
  const {
    count,
    pick,
    position,
    setPick
  } = state;

  const handleClick = event => setPick(index);

  const carouselType = type === 'bannerWithThumbnail' ? deps_1.getSlotOrder(position, index, count) : index;
  return react_1.default.createElement(styled_1.Slot, {
    deviceSpecific: deviceSpecific,
    gridGap: gridGap,
    type: type,
    key: index,
    data: position,
    pick: pick,
    onClick: handleClick,
    order: carouselType
  }, renderComponent(value));
};

function defaultRenderGallery(props, state) {
  const {
    desktopColspan,
    tabletColspan,
    mobileColspan,
    hasNavigations,
    list
  } = props,
        remainingProps = tslib_1.__rest(props, ["desktopColspan", "tabletColspan", "mobileColspan", "hasNavigations", "list"]);

  const {
    position,
    forwards,
    backwards
  } = state;
  const deviceSpecific = defaultRenderDeviceSpecific({
    desktop: 100 / desktopColspan,
    tablet: 100 / tabletColspan,
    mobile: 100 / mobileColspan
  });
  const arrowDeviceSpecific = defaultRenderDeviceSpecific({
    desktop: desktopColspan,
    tablet: tabletColspan,
    mobile: mobileColspan
  });
  const carouselOverAllLength = list.length % arrowDeviceSpecific;
  const overAllLengthDifference = arrowDeviceSpecific - carouselOverAllLength;
  const carouselStepLength = list.length - carouselOverAllLength - overAllLengthDifference;
  const deviceSpecificValue = (carouselStepLength < position ? carouselStepLength : position) * deviceSpecific;
  const backwardArrow = defaultRenderBackwardArrow(Object.assign({
    order: 0,
    onClick: backwards,
    arrow: 'prev',
    hasNavigations,
    isDisabled: position < arrowDeviceSpecific ? true : false
  }, remainingProps));
  const forwardArrow = defaultRenderForwardArrow(Object.assign({
    order: 2,
    onClick: forwards,
    arrow: 'next',
    hasNavigations,
    isDisabled: position >= list.length - arrowDeviceSpecific ? true : false
  }, remainingProps));
  const thumbnailView = list.map((value, index) => {
    const attributes = Object.assign({
      value,
      index,
      deviceSpecific,
      state
    }, remainingProps);
    return renderThumbnail(attributes);
  });
  const arrowView = arrowDeviceSpecific < list.length ? react_1.default.createElement(react_1.default.Fragment, null, backwardArrow, forwardArrow) : react_1.default.createElement(Empty_1.default, null);
  return react_1.default.createElement(styled_1.GalleryWrapper, null, react_1.default.createElement(styled_1.SliderWrapper, {
    order: 1
  }, react_1.default.createElement(styled_1.StyledThumbNail, {
    steps: deviceSpecificValue,
    gridGap: props.gridGap
  }, thumbnailView)), arrowView);
}
/**
 * rendering banner view
 */


function defaultRenderBanner(props, state) {
  const {
    list,
    arrowIconSize,
    arrowIconColor,
    hasNavigations,
    renderComponent
  } = props;
  const {
    position,
    value,
    pickNext,
    pickPrevious
  } = state;
  return react_1.default.createElement(styled_1.StyledBanner, null, renderComponent(value), defaultRenderStepper({
    isAbsolute: true,
    align: 'left',
    onClick: pickPrevious,
    arrow: 'prev',
    hasNavigations,
    arrowIconSize,
    arrowIconColor,
    isDisabled: position < 1 ? true : false
  }), defaultRenderStepper({
    isAbsolute: true,
    align: 'right',
    onClick: pickNext,
    arrow: 'next',
    hasNavigations,
    arrowIconSize,
    arrowIconColor,
    isDisabled: position >= list.length - 1 ? true : false
  }));
}
/**
 * rendering carousel view
 */


function defaultRenderCarousel(props, state) {
  const thumbnailView = defaultRenderGallery(props, state);
  return thumbnailView;
}
/**
 * rendering banner with thumbnail view
 */


function defaultRenderBannerWithThumbnail(props, state) {
  const bannerView = defaultRenderBanner(props, state);
  const thumbnailView = defaultRenderGallery(props, state);
  return react_1.default.createElement(react_1.default.Fragment, null, bannerView, thumbnailView);
}
/**
 * rendering bullets
 */


function defaultRenderBullets(props, state) {
  const {
    type,
    bulletSize,
    bulletColor,
    desktopColspan,
    tabletColspan,
    mobileColspan,
    list
  } = props;
  const {
    position,
    handleBullet
  } = state;
  const size = exotic_1.isNumber(bulletSize) ? bulletSize + 'px' : bulletSize;
  const listLength = list.length;
  const deviceSpecific = defaultRenderDeviceSpecific({
    desktop: desktopColspan,
    tablet: tabletColspan,
    mobile: mobileColspan
  });
  const view = list.map((value, index) => {
    const positionIndex = type == 'banner' ? index : deviceSpecific * index;
    return listLength > positionIndex ? react_1.default.createElement(styled_1.BulletIcon, {
      bulletSize: size,
      bulletColor: bulletColor,
      pick: position,
      data: positionIndex,
      onClick: handleBullet,
      type: type
    }) : react_1.default.createElement(Empty_1.default, null);
  });
  return react_1.default.createElement(styled_1.StyledBullets, null, view);
}
/**
 * rendering media carousel type
 */


const renderCarouselType = (props, state) => {
  switch (props.type) {
    case 'banner':
      return defaultRenderBanner(props, state);

    case 'bannerWithThumbnail':
      return defaultRenderBannerWithThumbnail(props, state);

    case 'carousel':
    default:
      return defaultRenderCarousel(props, state);
  }
};
/**
 * rendering media carousel wrapper
 */


function defaultRenderWrapper(props, state) {
  const {
    className,
    hasBullets
  } = props,
        remainingProps = tslib_1.__rest(props, ["className", "hasBullets"]);

  const deviceSpecific = defaultRenderDeviceSpecific({
    desktop: props.desktopColspan,
    tablet: props.tabletColspan,
    mobile: props.mobileColspan
  });
  const carouselView = renderCarouselType(remainingProps, state);
  const bulletType = props.type == 'bannerWithThumbnail' ? false : hasBullets;
  const bulletView = bulletType && deviceSpecific < props.list.length ? defaultRenderBullets(remainingProps, state) : react_1.default.createElement(Empty_1.default, null);
  return react_1.default.createElement(styled_1.StyledWrapper, {
    className: className
  }, carouselView, bulletView);
}

exports.defaultRenderWrapper = defaultRenderWrapper; //# sourceMappingURL=renderProps.js.map