import startCase from 'lodash/startCase'
import PropTypes from 'prop-types'
import React from 'react'
import Panel from 'react-bootstrap/lib/Panel'
import Tab from 'react-bootstrap/lib/Tab'
import Tabs from 'react-bootstrap/lib/Tabs'
import Icon from 'react-fa'
import { connect } from 'react-redux'

import Custom from './Custom'
import Diceware from './Diceware'
import Generic from './Generic'
import { selector, setOptionsKey } from '../../reducers/optionsKey'

const options = {
  generic: {
    Component: Generic,
    icon: 'check-square'
  },
  diceware: {
    Component: Diceware,
    icon: 'book'
  },
  custom: {
    Component: Custom,
    icon: 'question-circle'
  }
}

export function Options({ optionsKey, setOptionsKey }) {
  return (
    <Tabs activeKey={optionsKey} onSelect={setOptionsKey} id="options">
      {Object.entries(options).map(([name, { Component, icon }]) => (
        <Tab key={name} eventKey={name} title={<div><Icon name={icon} /> {startCase(name)}</div>}>
          <Panel><Component /></Panel>
        </Tab>
      ))}
    </Tabs>
  )
}

Options.propTypes = {
  optionsKey: PropTypes.string.isRequired,
  setOptionsKey: PropTypes.func.isRequired
}

export default connect(selector, { setOptionsKey })(Options)

@@ -486,33 +486,33 @@
  generic: %7B%0A    
-C
+c
 omponent: Generi
@@ -505,23 +505,27 @@
 ponent: 
+%3C
 Generic
+ /%3E
 ,%0A    ic
@@ -528,17 +528,28 @@
   icon: 
-'
+%3CIcon name=%22
 check-sq
@@ -552,17 +552,20 @@
 k-square
-'
+%22 /%3E
 %0A  %7D,%0A  
@@ -572,33 +572,33 @@
 diceware: %7B%0A    
-C
+c
 omponent: Dicewa
@@ -591,24 +591,25 @@
 ponent: 
+%3C
 Diceware
 ,%0A    ic
@@ -600,16 +600,19 @@
 Diceware
+ /%3E
 ,%0A    ic
@@ -619,14 +619,28 @@
 on: 
-'book'
+%3CIcon name=%22book%22 /%3E
 %0A  %7D
@@ -657,17 +657,17 @@
 : %7B%0A    
-C
+c
 omponent
@@ -668,22 +668,26 @@
 ponent: 
+%3C
 Custom
+ /%3E
 ,%0A    ic
@@ -690,17 +690,28 @@
   icon: 
-'
+%3CIcon name=%22
 question
@@ -717,17 +717,20 @@
 n-circle
-'
+%22 /%3E
 %0A  %7D%0A%7D%0A%0A
@@ -914,17 +914,17 @@
 name, %7B 
-C
+c
 omponent
@@ -995,28 +995,14 @@
 div%3E
-%3CIcon name=
 %7Bicon%7D
- /%3E
  %7Bst
@@ -1045,18 +1045,18 @@
 nel%3E
-%3CC
+%7Bc
 omponent
  /%3E%3C
@@ -1051,19 +1051,17 @@
 omponent
- /%3E
+%7D
 %3C/Panel%3E

Use Component instances in options