import React from 'react'
import { omit } from '@skava/utils'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import { GalleryProps, GalleryEventHandlerArgs, ItemProps } from './typings'
import { isNonEmptyArray, getItemWidth, getDeviceType, getItemDisplayCount } from './deps'
import {
  Bullet,
  LeftNavigation,
  RightNavigation,
  NavigationContainer,
  BulletsConatiner,
  GalleryItemPanel,
  GalleryListWrapper,
  GalleryListContainer,
  GalleryWrapper,
} from './styled'

const navigationClicked = (args) => {
  console.log('[arrow clicked!]', args)
}

const bulletClicked = (args) => {
  console.log('[bullet clicked!]', args)
}

/**
 * render navigations
 */
function defaultRenderNavigations(props: GalleryProps) {
  return (
    <React.Fragment>
      <LeftNavigation onClick={navigationClicked} />
      <RightNavigation onClick={navigationClicked} />
    </React.Fragment>
  )
}

function defaultRenderBullet(index: number) {
  return <Bullet onClick={bulletClicked}>{index + 1}</Bullet>
}

/**
 * render bullets
 */
function defaultRenderBulletList(props: GalleryProps) {
  const { activeDisplayCount, list, renderBullet } = props
  const slideLength = Math.ceil(list.length / activeDisplayCount)
  const bulletsList = Array.apply(undefined, Array(slideLength))
  return bulletsList.map((item, index) => renderBullet(index))
}

/**
 * rendering item
 */
function defaultRenderItem(item: ItemProps, index?: number, props?: GalleryProps) {
  const itemKey = `item-${index}`
  const { itemWidth } = props
  return <GalleryItemPanel key={itemKey} itemWidth={itemWidth} />
}

/**
 * rendering item list
 */
function defaultRenderList(props: GalleryProps) {
  const { list, renderItem, itemWidth, ...remainingProps } = props
  if (isNonEmptyArray(list)) {
    const containerWidth = list.length * itemWidth
    const items = list.map((item, index) => renderItem(item, index, { itemWidth, ...remainingProps }))
    return <GalleryListContainer containerWidth={containerWidth}>{items}</GalleryListContainer>
  } else {
    return <Empty />
  }
}

function defaultRenderGalleryTemplate(props: GalleryProps) {
  const { renderNavigations, ...remainingProps } = props
  const activeDisplayCount = getItemDisplayCount(remainingProps)
  const itemWidth = getItemWidth(activeDisplayCount)
  const attributes = {
    ...remainingProps,
    activeDisplayCount,
    itemWidth,
  }
  const navigations = renderNavigations(attributes)
  const bullets = defaultRenderBulletList(attributes)
  const listItems = defaultRenderList(attributes)
  return (
    <React.Fragment>
      <NavigationContainer>
        {navigations}
      </NavigationContainer>
      <GalleryListWrapper>
        {listItems}
      </GalleryListWrapper>
      <BulletsConatiner>
        {bullets}
      </BulletsConatiner>
    </React.Fragment>
  )
}

/**
 * rendering wrapper
 */
function defaultRenderWrapper(props: GalleryProps) {
  const { className, children } = props
  return <GalleryWrapper className={className}>{children}</GalleryWrapper>
}

export {
  defaultRenderNavigations,
  defaultRenderBullet,
  defaultRenderItem,
  // defaultRenderBulletList,
  // defaultRenderList,
  defaultRenderGalleryTemplate,
  defaultRenderWrapper,
}