import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import Lightbox from 'react-images';

import { StyledLightBoxProps } from './styled-lightbox.types';

import { LightboxTheme as CosmosLightboxTheme } from './styles/cosmos/styled.lightbox.styles.cosmos';
import { LightboxTheme as DefaultLightboxTheme } from './styles/styled.lightbox.styles.default';
import { MULTI_IMAGE } from 'utils/constants/layouts-names';
import { getTheme } from 'utils/styles/style-config-factory';

class StyledLightbox extends Component<StyledLightBoxProps> {

  handleLightboxClosed = () => {
    this.props.uiStore!.toggleLightbox();
  }

  handleLightboxNext = () => {
    const currentIndex: number = this.props.uiStore!.lightBoxImageIndex;
    const nextIndex: number = currentIndex + 1 >= this.props.uiStore!.lightBoxImages.length ? 0 : currentIndex + 1;
    this.props.uiStore!.updateLightboxIndex(nextIndex);
  }

  handleLightboxPrevious = () => {
    const currentIndex: number = this.props.uiStore!.lightBoxImageIndex;
    const nextIndex: number = currentIndex - 1 < 0 ? this.props.uiStore!.lightBoxImages.length - 1 : currentIndex - 1;
    this.props.uiStore!.updateLightboxIndex(nextIndex);
  }

  render() {

    const LightboxTheme = getTheme({
      default: DefaultLightboxTheme,
      layoutThemes: [
        { layoutId: MULTI_IMAGE.COSMOS_GRID, theme: CosmosLightboxTheme }
      ]
    }, this.props.uiStore!.lightBoxLayoutId)

    return(
      <Lightbox
        backdropClosesModal={true}
        images={this.props.uiStore!.lightBoxImages}
        currentImage={this.props.currentIndex}
        isOpen={true}
        theme={LightboxTheme}
        onClickPrev={this.handleLightboxPrevious}
        onClickNext={this.handleLightboxNext}
        onClose={this.handleLightboxClosed}
      />
    )
  }
}

export default inject('uiStore')(observer(StyledLightbox));