// @flow
import { Icon } from '@siteone/pagebuilder-ui'
import React from 'react'

const iconStyles = {
  width: '120px',
  height: '90px',
  textAlign: 'center',
  fontSize: '40px',
}

const emojis = [ '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤩', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🤯', '😬', '😰' ]
const icons = ['action/Backward', 'action/BackwardSquare', 'action/CloudDownload', 'action/CloudUpload', 'action/Copy', 'action/Crop', 'action/Cross', 'action/Cut', 'action/Delete', 'action/Download', 'action/Duplicate', 'action/Edit', 'action/Forward', 'action/ForwardSquare', 'action/In', 'action/Minus', 'action/MoveDiagonal', 'action/MoveStraight', 'action/Out', 'action/Paste', 'action/Plus', 'action/Refresh', 'action/RotateLeft', 'action/RotateRight', 'action/ScaleIn', 'action/ScaleOut', 'action/Settings', 'action/Tick', 'action/Tools', 'action/Upload', 'alert/AttentionCircle', 'alert/AttentionTriangle', 'alert/Disabled', 'alert/Help', 'clipboard/Cross', 'clipboard/Minus', 'clipboard/Plain', 'clipboard/Plus', 'clipboard/Text', 'clipboard/Tick', 'communication/Bell', 'communication/Bookmark', 'communication/Chat', 'communication/Flag', 'communication/Heart', 'communication/Message', 'communication/Phone', 'communication/Phone2', 'communication/Share', 'communication/Signal', 'communication/Star', 'communication/StarFilled', 'communication/StarHalf', 'communication/Thumbs', 'communication/Umbrela', 'communication/Voicemail', 'controls/Eject', 'controls/Equalizer', 'controls/FastForward', 'controls/FullScreen', 'controls/Headphones', 'controls/Microphone', 'controls/MicrophoneOff', 'controls/Pause', 'controls/Play', 'controls/Power', 'controls/Rewind', 'controls/SkipBack', 'controls/SkipForward', 'controls/Stop', 'controls/VolumeDown', 'controls/VolumeOff', 'controls/VolumeOn', 'controls/VolumeUp', 'device/Desktop', 'device/Laptop', 'device/Mobile', 'device/Tablet', 'direction/arrow/BottomLeft', 'direction/arrow/BottomRight', 'direction/arrow/Down', 'direction/arrow/Inward', 'direction/arrow/Left', 'direction/arrow/Outward', 'direction/arrow/Right', 'direction/arrow/Up', 'direction/arrow/UpLeft', 'direction/arrow/UpRight', 'direction/chevron/Down', 'direction/chevron/Left', 'direction/chevron/Right', 'direction/chevron/Up', 'direction/triangle/Down', 'direction/triangle/Left', 'direction/triangle/Right', 'direction/triangle/Up', 'documents/Book', 'documents/Copy', 'documents/DocumentStack', 'documents/DocumentText', 'documents/down/DocumentCross', 'documents/down/DocumentMinus', 'documents/down/DocumentPlain', 'documents/down/DocumentPlus', 'documents/down/DocumentTick', 'documents/Edit', 'documents/Folder', 'documents/Open', 'documents/Paste', 'documents/Save', 'documents/up/DocumentCross', 'documents/up/DocumentMinus', 'documents/up/DocumentPlain', 'documents/up/DocumentPlus', 'documents/up/DocumentTick', 'finance/BarChart', 'finance/Basket', 'finance/Briefcase', 'finance/Card', 'finance/Cash', 'finance/CashStack', 'finance/Coin', 'finance/HandCoins', 'finance/LineGraph', 'finance/PieChart', 'finance/Presentation', 'finance/Trolley', 'folders/Cross', 'folders/Folder', 'folders/Minus', 'folders/Plus', 'folders/Tick', 'layout/Grid', 'layout/ThreeColumn', 'layout/ThreeRow', 'layout/TwoColumn', 'layout/TwoColumnLeft', 'layout/TwoColumnLeftSplit', 'layout/TwoColumnRight', 'layout/TwoColumnRightSplit', 'layout/TwoRow', 'layout/WebpageLeft', 'layout/WebpageLeftSplit', 'layout/WebpageRight', 'layout/WebpageRightSplit', 'layout/WebpageTextLeft', 'layout/WebpageTextRight', 'location/Compass', 'location/Location', 'location/Map', 'location/Marker', 'location/Pin', 'mail/Attatchement', 'mail/Cross', 'mail/Message', 'mail/Minus', 'mail/Open', 'mail/Plus', 'mail/Sent', 'mail/Tick', 'media/Camera', 'media/Image', 'media/Music', 'media/Video', 'navigation/Hamburger', 'navigation/Home', 'navigation/Layers', 'navigation/More', 'navigation/Search', 'navigation/Widgets', 'navigation/ZoomIn', 'navigation/ZoomOut', 'page/Cross', 'page/Minus', 'page/Plain', 'page/Plus', 'page/Tick', 'security/Key', 'security/Locked', 'security/Unlocked', 'social/Facebook', 'social/Google', 'social/Instagram', 'social/Linkedin', 'social/Twitter', 'social/Web', 'time/Calendar', 'time/Clock', 'time/History', 'time/Timer', 'user/Cross', 'user/Minus', 'user/Multiple', 'user/Plain', 'user/Plus', 'user/Tick', 'visibility/Contrast', 'visibility/Hidden', 'visibility/Invisible', 'visibility/Visible', 'webpage/Cross', 'webpage/Minus', 'webpage/Plain', 'webpage/Plus', 'webpage/Search', 'webpage/Tick', 'writing/CentreAlign', 'writing/Circle', 'writing/Cross', 'writing/Justified', 'writing/LeftAlign', 'writing/Minus', 'writing/Plus', 'writing/RightAlign', 'writing/TextLarge', 'writing/TextMedium', 'writing/TextSmall', 'writing/TextSmallest', 'writing/Tick']

const Emoji = ({ i }) => <div style={iconStyles}>{emojis[i]}</div>

export const getEmoji = i => emojis[i]

const total = 100

export const generateImage = i => {
  const categories = [
    {aplCode: "media-library", name: "Media library"},
    {aplCode: "novinky", name: "Novinky"},
    {aplCode: "stranky", name: "Stránky"},
  ]
  // random category
  // const category = categories[Math.floor(Math.random() * 3)]
  const category = categories[i % categories.length]

  const isLottie = Math.random() < 0.1

  return {
    props: {
      id: i,
      url: isLottie ? 'https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/skip-forward.json' : `https://picsum.photos/id/${i}/240/180.jpg`,
      alt: isLottie ? 'skip-forward.json' : `${i}`,
      width: 240,
      height: 180,
      category,
      tags: ['ahoj', 'nazdar', 'hello', 'hi'],
      name: isLottie ? 'skip-forward.json' : `picsum.${i}.jpg`,
    },
    details: {
      "Rozlišení": '1200px / 1000px',
      "Název": isLottie ? 'skip-forward.json' : `picsum.${i}.jpg`,
    },
    returnValue: {
      url: isLottie ? 'https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/skip-forward.json' : `https://picsum.photos/id/${i}/1200/1000.jpg`,
      alt: isLottie ? 'skip-forward.json' : `picsum ${i}.jpg`,
      width: '1200',
      height: '1000',
    },
    key: `key-${Math.random()}`,
  }
}

export const generateIcon = (i) => ({
  props: {
    name: icons[i],
    size: 44,
    color: 'editable',
    category: {
      aplCode: 'all',
    },
  },
  details: {
    filename: `picsum ${i}`,
    alt: `picsum ${i}`,
    size: '1200px / 1000px',
  },
  component: ({name, size, color}) => <Icon name={name} size={size} color={color}/>,
  returnValue: icons[i],
  key: `key-${i}`,
})

export const generateEmoji = (i) => {
  const rand = Math.floor(Math.random() * emojis.length)
  return {
    props: {
      i: rand,
    },
    details: {
      tags: `emoji, emoji ${i}`,
    },

    component: Emoji,
    returnValue: {
      id: rand,
    },
    key: `key-${i}`,
  }
}

export const generateMedia = (number, type = 'image') => {
  let i = 0
  const media = []
  while (i < number) {
    i += 1
    if (type === 'emoji') {
      media.push(generateEmoji(i))
    } else if (type === 'image') {
      media.push(generateImage(i))
    } else if (type === 'icon') {
      media.push(generateIcon(i))
    } else {
      media.push(Math.random() > 0.5 ? generateEmoji(i) : generateImage(i))
    }
  }
  return media
}

export const mockMedia = {
  media: generateMedia(total),
  total,
  limit: 2,
  offset: 0,
}

export const getGetPage = (total = 1000, type = 'image') => {
  const mockMedia = {
    media: generateMedia(total, type),
    total,
    limit: 2,
    offset: 0,
  }

  // @TODO allow filter by searchParameters and category together
  // now is possible filter only by one of them
  const getMedia = (searchParameters: Object = {}, category: string) => {
    if (searchParameters.searchTerm) {
      const searchTerm = `${searchParameters.searchTerm}`
      console.log("filter by searchParameters")
      return mockMedia.media.filter(
        ({ details: { filename, tags } }) => filename && filename.includes(searchTerm) || tags.includes(searchTerm),
      )
    }
    if (category) {
      return mockMedia.media.filter(
        ({ props: { category: mcat } }) => {
          return mcat && mcat.aplCode === category
        },
      )
    }
    return mockMedia.media
  }
  return ({ page, limit, searchParameters, category, orderBy }: {page: number, limit: number, searchParameters: string, category: string, orderBy: string}): Promise<any> => {
    return new Promise((resolve, reject) => {
      const media = getMedia(searchParameters, category)
      const offset = page * limit
      const pageMedia = media.slice(offset, offset + limit)

      // only for testing dummy sort
      if (orderBy === 'AZ_ASC') {
        pageMedia.reverse()
      }

      // Timeout simulate server latency
      setTimeout(function(){
        resolve({
          media: pageMedia,
          count: media.length,
          hasNext: media.length > (page + 1) * limit,
        })
      }, 1000)

      // reject("some error hapens")
    })

  }
}

export default mockMedia