import { mapNameToSelectOption } from 'app/utils'

export const { NODE_ENV } = process.env
export const ENV_DEVELOPMENT = NODE_ENV !== 'production'
export const ENV_PRODUCTION = NODE_ENV === 'production'

export const URLS = ENV_PRODUCTION ? {
  share_url: 'https://animism.e-flux.com/episode1/',
  audio: '/episode1/media/animism_episode_01.mp3',
  eflux_logo: 'https://e-flux.com/',
} : {
  audio: '/static/data_store/peaks/animism_episode_01_2810.mp3',
  peaks: '/static/data_store/peaks/peaks.json',
  text: '/static/data_store/peaks/text.txt',
  eflux_logo: '/',
  share_url: 'https://animism.e-flux.com/',
}

export const WAVEFORM_SIZE = 300

export const ZOOM_STEPS = [
  1,
  2,
  3,
  10,
  20,
  30,
  60,
]

export const ZOOM_LABEL_STEPS = [
  20,
  60,
  60,
  300,
  600,
  600,
  1200,
]

export const ZOOM_TICK_STEPS = [
  5,
  10,
  30,
  60,
  60,
  60,
  600,
]

export const HEADER_MARGIN = 50
export const INNER_HEIGHT = window.innerHeight - HEADER_MARGIN

export const ROMAN_NUMERALS = [
  'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X',
  'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
]

export const ANNOTATION_SELECT_LABELS = {
  'section_heading': 'Chapter Title',
  'heading_text': 'Heading',
  'video_set_volume': '(cue) Set Volume',
  'gallery_advance': '(cue) Advance Frame',
}

const mapNameToAnnotationFunction = mapNameToSelectOption(ANNOTATION_SELECT_LABELS)

export const ANNOTATION_SELECT_OPTIONS = [
  {
    name: "text",
    options: [
      'sentence',
      'section_heading',
      'heading_text',
      'pullquote_credit',
      'paragraph_end',
      'footnote',
      'text_plate',
    ].map(mapNameToAnnotationFunction)
  },
  {
    name: "image",
    options: [
      'curtain',
      'image',
    ].map(mapNameToAnnotationFunction)
  },
  {
    name: "video",
    options: [
      'video',
      'subtitle',
      'video_set_volume',
    ].map(mapNameToAnnotationFunction)
  },
  {
    name: "gallery",
    options: [
      'carousel',
      'gallery_advance',
      'grid',
      'vitrine',
      'gallery',
    ].map(mapNameToAnnotationFunction)
  },
  {
    name: "intro",
    options: [
      'intro',
      'subtitle',
    ].map(mapNameToAnnotationFunction)
  },
]

export const TEXT_ANNOTATION_TYPES = new Set([
  'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit',
  'footnote', 'text_plate', 'subtitle',
])

export const MEDIA_ANNOTATION_TYPES = new Set([
  'image', 'carousel', 'grid', 'gallery',
  'video',
  'vitrine',
])

export const MEDIA_LABEL_TYPES = {
  image: 'Image Gallery',
  gallery: 'Image Gallery',
  carousel: 'Image Gallery',
  grid: 'Image Gallery',
  video: 'Video',
  vitrine: 'Vitrine',
}

export const INLINE_UTILITY_ANNOTATION_TYPES = new Set([
  'intro', 'schedule',
])

export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
  'curtain', 'text_plate', 'subtitle',
])

export const CUE_UTILITY_ANNOTATION_TYPES = new Set([
  'gallery_advance', 'video_set_volume',
])

// elements which, if fullscreen, will not disappear if the episode is paused
export const PERSISTENT_FULLSCREEN_ELEMENTS = new Set([
  'video', 'gallery', 'carousel', 'vitrine',
])

export const CURTAIN_COLORS = [
  { label: 'white', backgroundColor: 'rgba(255,255,255,1.0)', textColor: '#000000' },
  { label: 'light gray', backgroundColor: 'rgba(238,238,238,1.0)', textColor: '#000000' },
  { label: 'dark blue', backgroundColor: 'rgba(26,31,51,1.0)', textColor: '#ffffff' },
  { label: 'dark gray', backgroundColor: 'rgba(34,34,34,1.0)', textColor: '#ffffff' },
  { label: 'black', backgroundColor: 'rgba(0,0,0,1.0)', textColor: '#ffffff' },
]

export const BLACK_WHITE_SELECT_OPTIONS = [
  { label: 'white', name: 'white'},
  { label: 'black', name: 'black'},
]

export const CURTAIN_STYLE_SELECT_OPTIONS = [
  { label: 'chapter heading', name: 'section_heading'},
  { label: 'video title', name: 'video_title'},
  { label: 'default', name: 'default'},
]

export const CURTAIN_COLOR_SELECT_OPTIONS = CURTAIN_COLORS.map(color => ({
  label: color.label,
  name: color.label,
}))

export const CURTAIN_COLOR_LOOKUP = CURTAIN_COLORS.reduce((a,b) => {
  a[b.label] = b
  a[b.label].name = b.label.replace(" ", "-")
  return a
}, {})

export const IMAGE_BACKGROUND_SIZE_OPTIONS = [
  { label: 'Cover', name: 'cover' },
  { label: 'Contain', name: 'contain' },
  { label: '90% Width', name: '90% auto' },
  { label: '90% Height', name: 'auto 90%' },
  { label: 'Hidden', name: 'hidden' },
]

export const IMAGE_INLINE_SIZE_OPTIONS = [
  { label: 'Fullscreen', name: 'fullscreen' },
  { label: 'Normal', name: 'normal' },
  { label: 'Narrow column width', name: 'narrow-column-width' },
  { label: 'Wide column width', name: 'wide-column-width' },
]

export const DISPLAY_SIZE = 2000
export const DISPLAY_QUALITY= 80
export const THUMBNAIL_SIZE = 320
export const THUMBNAIL_QUALITY = 80

export const GROWL = {
  OPENING_MESSAGE: "Start the episode by clicking play or scroll to browse on your own.",
  REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.",
}

export const EPILEPSY_WARNING = "WARNING: This video may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised."

export const SECTION_LIMITED_MESSAGE = "The full episode is not currently supported on mobile devices."

export const VIDEO_SCRUBBER_HIDE_DELAY = 1000
export const VIDEO_SCRUBBER_HOVER_AREA = 12 * 16 // 12 rem