import { html } from 'snabbdom-jsx'
import Class from 'classnames'
import Menu from '../widgets/Menu'
import checkbox from '../widgets/Checkbox'
require('./settings.css')

export default function view (state$) {
  return state$.map(function ({settings, toggled}) {
    let fields
    let showGrid = settings.grid.show
    // let showAnnot = settings.annotations.show
    let autoRotate = settings.camera.autoRotate

    fields = (
      <div className='settingsView'>
        <section className='settingEntry'>
          {checkbox({id: 'showGrid', className: 'showGrid', checked: showGrid})}
          <label htmlFor='showGrid'>
            Show grid
          </label>
        </section>
        <section className='settingEntry'>
          {checkbox({id: 'autoRotate', className: 'autoRotate', checked: autoRotate})}
          <label htmlFor='autoRotate'>
            Auto rotate camera
          </label>
        </section>
      </div>
    )

    const content = <section className={Class('content', {toggled: toggled})}>
      {fields}
    </section>


    const icon = `<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 23 22" class='icon'
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <title>settings</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="settings" fill="#000000">
            <path d="M11.2666667,15.1666667 C13.5678531,15.1666667 15.4333333,13.3011865 15.4333333,11 C15.4333333,8.69881354 13.5678531,6.83333333 11.2666667,6.83333333 C8.96548021,6.83333333 7.1,8.69881354 7.1,11 C7.1,13.3011865 8.96548021,15.1666667 11.2666667,15.1666667 L11.2666667,15.1666667 Z M11.2666667,14.1666667 C9.51776496,14.1666667 8.1,12.7489017 8.1,11 C8.1,9.25109829 9.51776496,7.83333333 11.2666667,7.83333333 C13.0155684,7.83333333 14.4333333,9.25109829 14.4333333,11 C14.4333333,12.7489017 13.0155684,14.1666667 11.2666667,14.1666667 L11.2666667,14.1666667 Z" id="Oval"></path>
            <path d="M19.4162442,9.83574866 L21.6910442,8.52161532 L22.1238875,8.2715653 L21.8739429,7.83866117 L19.3072762,3.3931945 L19.0572609,2.96016804 L18.6242442,3.21020025 L16.3509109,4.52286692 L16.9316766,4.58088816 C16.0703338,3.82115564 15.0711508,3.24195348 13.9912057,2.8788685 L14.3318667,3.3528 L14.3318667,0.733333333 L14.3318667,0.233333333 L13.8318667,0.233333333 L8.69853333,0.233333333 L8.19853333,0.233333333 L8.19853333,0.733333333 L8.19853333,3.36453333 L8.54002157,2.8903245 C7.44698042,3.2556907 6.45489372,3.83069927 5.60303272,4.58243482 L6.18397756,4.52438468 L3.90917756,3.21025134 L3.4761235,2.96007956 L3.22605714,3.3931945 L0.659390474,7.83866117 L0.409464619,8.27153275 L0.842256545,8.52159651 L3.11412321,9.83426318 L2.87432839,9.30153109 C2.64809965,10.4121085 2.64691756,11.5607073 2.8771922,12.6951936 L3.11708911,12.1627847 L0.842289105,13.476918 L0.409445822,13.726968 L0.659390474,14.1598722 L3.22605714,18.6053388 L3.47607242,19.0383653 L3.9090891,18.7883331 L6.18242244,17.4756664 L5.60203999,17.4179829 C6.4622902,18.1751904 7.45940361,18.7530899 8.53837636,19.1179224 L8.19853333,18.6442667 L8.19853333,21.2666667 L8.19853333,21.7666667 L8.69853333,21.7666667 L13.8318667,21.7666667 L14.3318667,21.7666667 L14.3318667,21.2666667 L14.3318667,18.6369333 L13.9909746,19.1109425 C15.0878591,18.7427575 16.0822959,18.1674667 16.9291812,17.4187251 L16.3478891,17.477082 L18.6226891,18.7912153 L19.0557432,19.0413871 L19.3058095,18.6082722 L21.8724762,14.1628055 L22.122402,13.7299339 L21.6896101,13.4798702 L19.4177435,12.1672035 L19.6574295,12.7004682 C19.8850581,11.589198 19.8866349,10.4389056 19.6561411,9.30333969 L19.4162442,9.83574866 L19.4162442,9.83574866 Z M18.9160224,8.96985134 L18.6045781,9.14977016 L18.6761255,9.50226031 C18.8798214,10.5058021 18.8784309,11.5201856 18.6777705,12.4997984 L18.6054637,12.8527962 L18.9174565,13.0330632 L21.1893232,14.3457298 L21.0064571,13.6627945 L18.4397905,18.1082612 L19.1229109,17.925318 L16.8481109,16.6111847 L16.5364613,16.4311473 L16.2668188,16.6695415 C15.5200472,17.3297714 14.6425981,17.8373837 13.6727587,18.1629242 L13.3318667,18.2773495 L13.3318667,18.6369333 L13.3318667,21.2666667 L13.8318667,20.7666667 L8.69853333,20.7666667 L9.19853333,21.2666667 L9.19853333,18.6442667 L9.19853333,18.2855219 L8.8586903,18.1706109 C7.90551828,17.8483154 7.02401408,17.3374198 6.26276001,16.6673504 L5.99327759,16.4301472 L5.68237756,16.6096669 L3.40904423,17.9223336 L4.09207619,18.1053278 L1.52540953,13.6598612 L1.34251089,14.3428153 L3.61731089,13.028682 L3.92875519,12.8487632 L3.8572078,12.496273 C3.65367194,11.4935197 3.65471455,10.4804521 3.85420494,9.50113557 L3.92604546,9.14846393 L3.61441012,8.96840349 L1.34254346,7.65573682 L1.52540953,8.33867217 L4.09207619,3.8932055 L3.40895577,4.07614866 L5.68375577,5.39028199 L5.99510091,5.57014353 L6.26470062,5.33223185 C7.01676101,4.66856662 7.89183177,4.16137991 8.8570451,3.83874217 L9.19853333,3.72459435 L9.19853333,3.36453333 L9.19853333,0.733333333 L8.69853333,1.23333333 L13.8318667,1.23333333 L13.3318667,0.733333333 L13.3318667,3.3528 L13.3318667,3.71219894 L13.6725276,3.8267315 C14.6255812,4.14715468 15.5083401,4.65886862 16.27019,5.33084517 L16.5397204,5.56857974 L16.8509558,5.38886641 L19.1242891,4.07619975 L18.4412571,3.8932055 L21.0079238,8.33867217 L21.1908224,7.65571801 L18.9160224,8.96985134 L18.9160224,8.96985134 Z" id="Shape"></path>
        </g>
    </g>
</svg>`



    return (
    <div className='settings'>
      {Menu({toggled, icon, klass: 'containerToggler settingsToggler', tooltip: 'settings', tooltipPos: 'top',
        content, contentPosition: 'top', arrow: false
      })}

    </div>)
  }
  )
}
